diff --git a/assets/active.png b/assets/active.png
new file mode 100644
index 0000000..3a50ad1
Binary files /dev/null and b/assets/active.png differ
diff --git a/assets/icon.development.png b/assets/icon.development.png
new file mode 100644
index 0000000..7210e59
Binary files /dev/null and b/assets/icon.development.png differ
diff --git a/assets/inactive.png b/assets/inactive.png
new file mode 100644
index 0000000..22c2944
Binary files /dev/null and b/assets/inactive.png differ
diff --git a/package.json b/package.json
index 68cbd9f..6e65f3f 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,17 @@
       "gecko": {
         "id": "{3fd86354-c73f-4395-9e26-2c5c984579bf}"
       }
-    }
+    },
+    "web_accessible_resources": [
+      {
+        "resources": [
+          "assets/active.png",
+          "assets/inactive.png"
+        ],
+        "matches": [
+          "<all_urls>"
+        ]
+      }
+    ]
   }
 }
diff --git a/src/hooks/useDomainWhitelist.ts b/src/hooks/useDomainWhitelist.ts
index 73b8e51..9503cf8 100644
--- a/src/hooks/useDomainWhitelist.ts
+++ b/src/hooks/useDomainWhitelist.ts
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { usePermission } from '~hooks/usePermission';
 import { useDomainStorage } from '~utils/storage';
@@ -27,6 +27,11 @@ export function useToggleWhitelistDomain(domain: string) {
   const { domainWhitelist, addDomain, removeDomain } = useDomainWhitelist();
   const isWhitelisted = domainWhitelist.includes(domain);
   const { grantPermission } = usePermission();
+  const iconPath = (chrome || browser).runtime.getURL(isWhitelisted ? 'assets/active.png' : 'assets/inactive.png');
+
+  (chrome || browser).action.setIcon({
+    path: iconPath,
+  });
 
   const toggle = useCallback(() => {
     if (!isWhitelisted) {