diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx
index cf09ae53ba..c74859ce20 100644
--- a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx
+++ b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx
@@ -28,8 +28,6 @@ import { permissions } from '@backstage/plugin-playlist-common';
 import AddBoxIcon from '@material-ui/icons/AddBox';
 import DeleteIcon from '@material-ui/icons/Delete';
 import SearchIcon from '@material-ui/icons/Search';
-import { makeStyles } from '@material-ui/core';
-import { red } from '@material-ui/core/colors';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 
@@ -37,12 +35,6 @@ import { playlistApiRef } from '../../api';
 import { useTitle } from '../../hooks';
 import { AddEntitiesDrawer } from './AddEntitiesDrawer';
 
-const useStyles = makeStyles({
-  deleteicon: {
-    color: red[600],
-  },
-});
-
 export const PlaylistEntitiesTable = ({
   playlistId,
 }: {
@@ -51,7 +43,6 @@ export const PlaylistEntitiesTable = ({
   const errorApi = useApi(errorApiRef);
   const playlistApi = useApi(playlistApiRef);
   const alertApi = useApi(alertApiRef);
-  const classes = useStyles();
   const [openAddEntitiesDrawer, setOpenAddEntitiesDrawer] = useState(false);
 
   const { allowed: editAllowed } = usePermission({
@@ -117,7 +108,7 @@ export const PlaylistEntitiesTable = ({
   const actions = editAllowed
     ? [
         {
-          icon: () => <DeleteIcon className={classes.deleteicon} />,
+          icon: () => <DeleteIcon color="secondary" />,
           tooltip: `Remove from ${singularTitleLowerCase}`,
           onClick: removeEntity,
         },
diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx
index 528c3be46a..3a31dcaade 100644
--- a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx
+++ b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx
@@ -43,7 +43,6 @@ import {
 } from '@material-ui/core';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { red } from '@material-ui/core/colors';
 import React, { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
@@ -68,9 +67,6 @@ const useStyles = makeStyles({
     marginTop: '5px',
     marginBottom: '5px',
   },
-  deleteicon: {
-    color: red[600],
-  },
 });
 
 export type PlaylistHeaderProps = {
@@ -170,7 +166,7 @@ export const PlaylistHeader = ({ playlist, onUpdate }: PlaylistHeaderProps) => {
           },
           {
             label: `Delete ${singularTitle}`,
-            icon: <DeleteIcon className={classes.deleteicon} />,
+            icon: <DeleteIcon color="secondary" />,
             disabled: !deleteAllowed,
             onClick: () => setOpenDeleteDialog(true),
           },