diff --git a/web/src/components/AppBar.jsx b/web/src/components/AppBar.jsx
index c5b11956c..9e4387d74 100644
--- a/web/src/components/AppBar.jsx
+++ b/web/src/components/AppBar.jsx
@@ -77,14 +77,14 @@ export default function AppBar({ title }) {
     >
       <div className="lg:hidden">
         <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowDrawer} type="text">
-          <MenuIcon />
+          <MenuIcon className="w-10 h-10" />
         </Button>
       </div>
       <LinkedLogo />
       <div className="flex-grow-1 flex justify-end w-full">
         <div className="w-auto" ref={moreRef}>
           <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
-            <MoreIcon />
+            <MoreIcon className="w-10 h-10" />
           </Button>
         </div>
       </div>
diff --git a/web/src/icons/ArrowDropdown.jsx b/web/src/icons/ArrowDropdown.jsx
index 555901e39..0563e1194 100644
--- a/web/src/icons/ArrowDropdown.jsx
+++ b/web/src/icons/ArrowDropdown.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function ArrowDropdown() {
+export function ArrowDropdown({ className = '' }) {
   return (
-    <svg className="fill-current" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
       <path d="M7 10l5 5 5-5z" />
     </svg>
diff --git a/web/src/icons/ArrowDropup.jsx b/web/src/icons/ArrowDropup.jsx
index 534076a94..8805e274c 100644
--- a/web/src/icons/ArrowDropup.jsx
+++ b/web/src/icons/ArrowDropup.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function ArrowDropup() {
+export function ArrowDropup({ className = '' }) {
   return (
-    <svg className="fill-current" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
       <path d="M7 14l5-5 5 5z" />
     </svg>
diff --git a/web/src/icons/AutoAwesome.jsx b/web/src/icons/AutoAwesome.jsx
index b4f3803fa..f464d3b96 100644
--- a/web/src/icons/AutoAwesome.jsx
+++ b/web/src/icons/AutoAwesome.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function AutoAwesome() {
+export function AutoAwesome({ className = '' }) {
   return (
-    <svg className="fill-current" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
       <path d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" />
     </svg>
diff --git a/web/src/icons/DarkMode.jsx b/web/src/icons/DarkMode.jsx
index 414457e47..8a2abc5b4 100644
--- a/web/src/icons/DarkMode.jsx
+++ b/web/src/icons/DarkMode.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function DarkMode() {
+export function DarkMode({ className = '' }) {
   return (
-    <svg className="fill-current" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <rect fill="none" height="24" width="24" />
       <path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z" />
     </svg>
diff --git a/web/src/icons/LightMode.jsx b/web/src/icons/LightMode.jsx
index 3044d9102..0609391d5 100644
--- a/web/src/icons/LightMode.jsx
+++ b/web/src/icons/LightMode.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function LightMode() {
+export function LightMode({ className = '' }) {
   return (
-    <svg className="fill-current" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <rect fill="none" height="24" width="24" />
       <path d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z" />
     </svg>
diff --git a/web/src/icons/Menu.jsx b/web/src/icons/Menu.jsx
index fff8961b8..76ea9dd61 100644
--- a/web/src/icons/Menu.jsx
+++ b/web/src/icons/Menu.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function Menu() {
+export function Menu({ className = '' }) {
   return (
-    <svg className="fill-current" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
       <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
     </svg>
diff --git a/web/src/icons/MenuOpen.jsx b/web/src/icons/MenuOpen.jsx
index 6d8f7bb0c..c3b28308d 100644
--- a/web/src/icons/MenuOpen.jsx
+++ b/web/src/icons/MenuOpen.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function MenuOpen() {
+export function MenuOpen({ className = '' }) {
   return (
-    <svg className="fill-current" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <path d="M0 0h24v24H0V0z" fill="none" />
       <path d="M3 18h13v-2H3v2zm0-5h10v-2H3v2zm0-7v2h13V6H3zm18 9.59L17.42 12 21 8.41 19.59 7l-5 5 5 5L21 15.59z" />
     </svg>
diff --git a/web/src/icons/More.jsx b/web/src/icons/More.jsx
index 7ea2b6df8..9747caa07 100644
--- a/web/src/icons/More.jsx
+++ b/web/src/icons/More.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function More() {
+export function More({ className = '' }) {
   return (
-    <svg className="fill-current" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
       <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
     </svg>
diff --git a/web/src/icons/Settings.jsx b/web/src/icons/Settings.jsx
index be605cd3c..a2dbafb60 100644
--- a/web/src/icons/Settings.jsx
+++ b/web/src/icons/Settings.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function Settings() {
+export function Settings({ className = '' }) {
   return (
-    <svg className="fill-current" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <g>
         <path d="M0,0h24v24H0V0z" fill="none" />
         <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />