diff --git a/.changeset/pretty-apes-sneeze.md b/.changeset/pretty-apes-sneeze.md
new file mode 100644
index 0000000000..a1008dc951
--- /dev/null
+++ b/.changeset/pretty-apes-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Fixed a bug where the theme icons would not be colored according to their active state.
diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
index 7279fcb96a..ca57de3a78 100644
--- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
@@ -141,8 +141,8 @@ export const UserSettingsThemeToggle = () => {
           onChange={handleSetTheme}
         >
           {themeIds.map(theme => {
-            const themeIcon = themeIds.find(it => it.id === theme.id)?.icon;
             const themeId = theme.id;
+            const themeIcon = theme.icon;
             const themeTitle =
               theme.title ||
               (themeId === 'light' || themeId === 'dark'
@@ -156,7 +156,11 @@ export const UserSettingsThemeToggle = () => {
               >
                 <>
                   {themeTitle}&nbsp;
-                  <ThemeIcon id={themeId} icon={themeIcon} activeId={themeId} />
+                  <ThemeIcon
+                    id={themeId}
+                    icon={themeIcon}
+                    activeId={activeThemeId}
+                  />
                 </>
               </TooltipToggleButton>
             );