diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx
index 29877a91..98583a78 100644
--- a/src/components/navigation/items/ButtonItem.tsx
+++ b/src/components/navigation/items/ButtonItem.tsx
@@ -15,11 +15,13 @@ import { stopPropagation } from "../../../lib/stopPropagation";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
+import { Children } from "../../../types/Preact";
 import ChannelIcon from "../../common/ChannelIcon";
 import Tooltip from "../../common/Tooltip";
 import UserIcon from "../../common/user/UserIcon";
 import { Username } from "../../common/user/UserShort";
 import UserStatus from "../../common/user/UserStatus";
+import IconButton from "../../ui/IconButton";
 
 type CommonProps = Omit<
     JSX.HTMLAttributes<HTMLDivElement>,
@@ -164,11 +166,9 @@ export const ChannelButton = observer((props: ChannelProps) => {
                 channel: channel._id,
                 unread: !!alert,
             })}>
-            <ChannelIcon
-                className={styles.avatar}
-                target={channel}
-                size={compact ? 24 : 32}
-            />
+            <div className={styles.avatar}>
+                <ChannelIcon target={channel} size={compact ? 24 : 32} />
+            </div>
             <div className={styles.name}>
                 <div>{channel.name}</div>
                 {channel.channel_type === "Group" && (