diff --git a/extensions/one-time-password/CHANGELOG.md b/extensions/one-time-password/CHANGELOG.md
index 076c6e32d0b..a37a9eb125c 100644
--- a/extensions/one-time-password/CHANGELOG.md
+++ b/extensions/one-time-password/CHANGELOG.md
@@ -1,5 +1,15 @@
 # One Time Password Changelog
 
+## 2024-12-02
+
+### Added
+
+- Black and white icons now adapt to the system's appearance settings.
+
+### Changed
+
+- Removed color from the icons to make them more consistent with the system's appearance settings.
+
 ## 2024-11-07
 
 ### Added
diff --git a/extensions/one-time-password/package.json b/extensions/one-time-password/package.json
index fee121140a0..9e26445dd55 100644
--- a/extensions/one-time-password/package.json
+++ b/extensions/one-time-password/package.json
@@ -6,7 +6,8 @@
   "icon": "icon.png",
   "author": "lachero",
   "contributors": [
-    "soulevans07"
+    "soulevans07",
+    "BalliAsghar"
   ],
   "categories": [
     "Security",
diff --git a/extensions/one-time-password/src/one-time-password.tsx b/extensions/one-time-password/src/one-time-password.tsx
index c4260f811ab..cbf80589f07 100644
--- a/extensions/one-time-password/src/one-time-password.tsx
+++ b/extensions/one-time-password/src/one-time-password.tsx
@@ -13,6 +13,7 @@ import {
   popToRoot,
   confirmAlert,
   Color,
+  environment,
 } from '@raycast/api';
 import { useEffect, useState } from 'react';
 import { getProgressIcon } from '@raycast/utils';
@@ -35,6 +36,8 @@ export default () => {
   const [accounts, setAccounts] = useState<store.Account[]>([]);
   const [qrCodeScanType, setQRCodeScanType] = useState<ScanType>(null);
 
+  const { appearance } = environment;
+
   async function loadAccounts() {
     if (accounts.length === 0) setLoading(true);
     setAccounts(await store.getAccounts());
@@ -189,7 +192,9 @@ export default () => {
           <List.Item
             key={account.id}
             icon={{
-              source: `https://cdn.simpleicons.org/${account.issuer?.toLowerCase() || account.name?.toLowerCase()}`,
+              source: `https://cdn.simpleicons.org/${account.issuer?.toLowerCase() || account.name?.toLowerCase()}/${
+                appearance === 'dark' ? 'white' : 'black'
+              }`,
               fallback: Icon.Key,
             }}
             title={account.name}