converted all icons to iconoir

package.json

@@ -19,7 +19,6 @@
     "@radix-ui/react-collapsible": "^1.0.2",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",
@@ -30,6 +29,7 @@
     "destr": "^1.2.2",
     "emoji-mart": "^5.5.2",
     "framer-motion": "^9.1.7",
+    "iconoir-react": "^6.6.0",
     "jotai": "^2.0.3",
     "next": "^13.3.0",
     "nostr-relaypool": "^0.5.18",

pnpm-lock.yaml

@@ -7,7 +7,6 @@ specifiers:
   '@radix-ui/react-collapsible': ^1.0.2
   '@radix-ui/react-dialog': ^1.0.3
   '@radix-ui/react-dropdown-menu': ^2.0.4
-  '@radix-ui/react-icons': ^1.3.0
   '@radix-ui/react-popover': ^1.0.5
   '@radix-ui/react-tabs': ^1.0.3
   '@radix-ui/react-tooltip': ^1.0.5
@@ -34,6 +33,7 @@ specifiers:
   eslint-plugin-react-hooks: ^4.6.0
   framer-motion: ^9.1.7
   husky: ^8.0.3
+  iconoir-react: ^6.6.0
   jotai: ^2.0.3
   lint-staged: ^13.2.0
   next: ^13.3.0
@@ -61,7 +61,6 @@ dependencies:
   '@radix-ui/react-collapsible': 1.0.2_biqbaboplfbrettd7655fr4n2y
   '@radix-ui/react-dialog': 1.0.3_zn3vyfk3tbnwebg5ldvieekjaq
   '@radix-ui/react-dropdown-menu': 2.0.4_zn3vyfk3tbnwebg5ldvieekjaq
-  '@radix-ui/react-icons': 1.3.0_react@18.2.0
   '@radix-ui/react-popover': 1.0.5_zn3vyfk3tbnwebg5ldvieekjaq
   '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
   '@radix-ui/react-tooltip': 1.0.5_zn3vyfk3tbnwebg5ldvieekjaq
@@ -72,6 +71,7 @@ dependencies:
   destr: 1.2.2
   emoji-mart: 5.5.2
   framer-motion: 9.1.7_biqbaboplfbrettd7655fr4n2y
+  iconoir-react: 6.6.0_react@18.2.0
   jotai: 2.0.3_react@18.2.0
   next: 13.3.0_biqbaboplfbrettd7655fr4n2y
   nostr-relaypool: 0.5.18_ws@8.13.0
@@ -755,15 +755,6 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-icons/1.3.0_react@18.2.0:
-    resolution:
-      { integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw== }
-    peerDependencies:
-      react: ^16.x || ^17.x || ^18.x
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /@radix-ui/react-id/1.0.0_react@18.2.0:
     resolution:
       { integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw== }
@@ -2971,6 +2962,15 @@ packages:
     hasBin: true
     dev: true
 
+  /iconoir-react/6.6.0_react@18.2.0:
+    resolution:
+      { integrity: sha512-7ueB0jQlSZFjEa4qUCaGbfWLRjGBtOc0E+RYHEb3Ek3zDwQuNh4VLtV9kwGoiATRfBYVv8bgCmXI0nr52TRXsw== }
+    peerDependencies:
+      react: ^16.8.6 || ^17 || ^18
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /ignore/5.2.4:
     resolution:
       { integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== }

src/components/appHeader/actions.tsx

@@ -1,7 +1,7 @@
-import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { platform } from '@tauri-apps/api/os';
+import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 export default function AppActions() {
   const router = useRouter();
@@ -19,7 +19,7 @@ export default function AppActions() {
     router.reload();
   };
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const getPlatform = async () => {
       const result = await platform();
       setOS(result);
@@ -34,19 +34,19 @@ export default function AppActions() {
         onClick={() => goBack()}
         className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
       >
-        <ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+        <ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
       </button>
       <button
         onClick={() => goForward()}
         className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
       >
-        <ArrowRightIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+        <ArrowRight width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
       </button>
       <button
         onClick={() => reload()}
         className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
       >
-        <ReloadIcon className="h-[14px] w-[14px] text-zinc-500 group-hover:text-zinc-300" />
+        <Refresh width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
       </button>
     </div>
   );

src/components/channels/channelList.tsx

@@ -1,7 +1,7 @@
 import { ChannelListItem } from '@components/channels/channelListItem';
 import { CreateChannelModal } from '@components/channels/createChannelModal';
 
-import { GlobeIcon } from '@radix-ui/react-icons';
+import { Globe } from 'iconoir-react';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
@@ -26,7 +26,7 @@ export default function ChannelList() {
         className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950"
       >
         <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
-          <GlobeIcon className="h-3 w-3 text-zinc-500" />
+          <Globe width={12} height={12} className="text-zinc-500" />
         </div>
         <div>
           <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Browse channels</h5>

src/components/channels/createChannelModal.tsx

@@ -3,8 +3,8 @@ import { RelayContext } from '@components/relaysProvider';
 import { dateToUnix } from '@utils/getDate';
 
 import * as Dialog from '@radix-ui/react-dialog';
-import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
+import { Cancel, Plus } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -53,7 +53,7 @@ export const CreateChannelModal = () => {
       <Dialog.Trigger asChild>
         <div className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950">
           <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
-            <PlusIcon className="h-3 w-3 text-zinc-500" />
+            <Plus width={12} height={12} className="text-zinc-500" />
           </div>
           <div>
             <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new channel</h5>
@@ -73,7 +73,7 @@ export const CreateChannelModal = () => {
                       autoFocus={false}
                       className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
                     >
-                      <Cross1Icon className="h-3 w-3 text-zinc-300" />
+                      <Cancel width={12} height={12} className="text-zinc-500" />
                     </button>
                   </Dialog.Close>
                 </div>

src/components/channels/messages/hideMessageButton.tsx

@@ -7,6 +7,7 @@ import HideIcon from '@assets/icons/hide';
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import useLocalStorage from '@rehooks/local-storage';
+import { EyeClose } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext } from 'react';
 
@@ -36,7 +37,7 @@ export const HideMessageButton = ({ id }: { id: string }) => {
           <AlertDialog.Trigger asChild>
             <Tooltip.Trigger asChild>
               <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
-                <HideIcon className="h-4 w-4 text-zinc-400" />
+                <EyeClose width={16} height={16} className="text-zinc-400" />
               </button>
             </Tooltip.Trigger>
           </AlertDialog.Trigger>

src/components/channels/messages/muteButton.tsx

@@ -2,11 +2,10 @@ import { RelayContext } from '@components/relaysProvider';
 
 import { dateToUnix } from '@utils/getDate';
 
-import MuteIcon from '@assets/icons/mute';
-
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import useLocalStorage from '@rehooks/local-storage';
+import { MicMute } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext } from 'react';
 
@@ -36,7 +35,7 @@ export const MuteButton = ({ pubkey }: { pubkey: string }) => {
           <AlertDialog.Trigger asChild>
             <Tooltip.Trigger asChild>
               <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
-                <MuteIcon className="h-4 w-4 text-zinc-400" />
+                <MicMute width={16} height={16} className="text-zinc-400" />
               </button>
             </Tooltip.Trigger>
           </AlertDialog.Trigger>

src/components/channels/messages/replyButton.tsx

@@ -1,8 +1,7 @@
 import { channelReplyAtom } from '@stores/channel';
 
-import ReplyIcon from '@assets/icons/reply';
-
 import * as Tooltip from '@radix-ui/react-tooltip';
+import { Reply } from 'iconoir-react';
 import { useSetAtom } from 'jotai';
 
 export const ReplyButton = ({ id, pubkey, content }: { id: string; pubkey: string; content: string }) => {
@@ -20,7 +19,7 @@ export const ReplyButton = ({ id, pubkey, content }: { id: string; pubkey: strin
             onClick={() => createReply()}
             className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800"
           >
-            <ReplyIcon className="h-4 w-4 text-zinc-400" />
+            <Reply width={16} height={16} className="text-zinc-400" />
           </button>
         </Tooltip.Trigger>
         <Tooltip.Portal>

src/components/chats/chatModal.tsx

@@ -1,8 +1,8 @@
 import { ChatModalUser } from '@components/chats/chatModalUser';
 
 import * as Dialog from '@radix-ui/react-dialog';
-import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
+import { Cancel, Plus } from 'iconoir-react';
 import { useCallback, useEffect, useState } from 'react';
 
 export const ChatModal = () => {
@@ -25,7 +25,7 @@ export const ChatModal = () => {
       <Dialog.Trigger asChild>
         <div className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950">
           <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
-            <PlusIcon className="h-3 w-3 text-zinc-500" />
+            <Plus width={12} height={12} className="text-zinc-500" />
           </div>
           <div>
             <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new chat</h5>
@@ -44,7 +44,7 @@ export const ChatModal = () => {
                       autoFocus={false}
                       className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900"
                     >
-                      <Cross1Icon className="h-3 w-3 text-zinc-300" />
+                      <Cancel width={12} height={12} className="text-zinc-300" />
                     </button>
                   </Dialog.Close>
                   <h5 className="font-semibold leading-none text-zinc-500">New chat</h5>

src/components/form/channelMessage.tsx

@@ -6,8 +6,8 @@ import { channelReplyAtom } from '@stores/channel';
 
 import { dateToUnix } from '@utils/getDate';
 
-import { Cross1Icon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
+import { Cancel } from 'iconoir-react';
 import { useAtomValue } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { getEventHash, signEvent } from 'nostr-tools';
@@ -93,7 +93,7 @@ export default function FormChannelMessage({ eventId }: { eventId: string | stri
               onClick={() => stopReply()}
               className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
             >
-              <Cross1Icon className="h-3 w-3 text-zinc-100" />
+              <Cancel width={12} height={12} className="text-zinc-100" />
             </button>
           </div>
         </div>

src/components/form/emojiPicker.tsx

@@ -1,10 +1,9 @@
 import { noteContentAtom } from '@stores/note';
 
-import EmojiIcon from '@assets/icons/emoji';
-
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
 import * as Popover from '@radix-ui/react-popover';
+import { Emoji } from 'iconoir-react';
 import { useAtom } from 'jotai';
 
 export default function EmojiPicker() {
@@ -14,12 +13,12 @@ export default function EmojiPicker() {
     <Popover.Root>
       <Popover.Trigger asChild>
         <button className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700">
-          <EmojiIcon className="h-4 w-4 text-zinc-400" />
+          <Emoji width={16} height={16} className="text-zinc-400" />
         </button>
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
-          className="rounded-md will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+          className="rounded-md will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
           sideOffset={5}
         >
           <Picker

src/components/form/imagePicker.tsx

@@ -1,7 +1,7 @@
 import { noteContentAtom } from '@stores/note';
 
-import { PlusIcon } from '@radix-ui/react-icons';
 import * as Popover from '@radix-ui/react-popover';
+import { Plus } from 'iconoir-react';
 import { useAtom } from 'jotai';
 import { useState } from 'react';
 
@@ -19,12 +19,12 @@ export default function ImagePicker() {
     <Popover.Root>
       <Popover.Trigger asChild>
         <button className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700">
-          <PlusIcon className="h-4 w-4 text-zinc-400" />
+          <Plus width={16} height={16} className="text-zinc-400" />
         </button>
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
-          className="w-80 rounded-md bg-zinc-900/80 p-3 shadow-input shadow-black/50 ring-1 ring-zinc-800 backdrop-blur-xl will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+          className="w-80 rounded-md bg-zinc-900/80 p-3 shadow-input shadow-black/50 ring-1 ring-zinc-800 backdrop-blur-xl will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
           sideOffset={3}
         >
           <div>

src/components/multiAccounts/activeAccount.tsx

@@ -1,8 +1,8 @@
 import { DEFAULT_AVATAR } from '@stores/constants';
 
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { AvatarIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
 import { writeText } from '@tauri-apps/api/clipboard';
+import { LogOut, ProfileCircle, Settings } from 'iconoir-react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { nip19 } from 'nostr-tools';
@@ -44,7 +44,7 @@ export const ActiveAccount = ({ user }: { user: any }) => {
             className="group relative flex h-7 select-none items-center rounded-sm px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500"
           >
             <div className="absolute left-0 inline-flex w-6 items-center justify-center">
-              <AvatarIcon />
+              <ProfileCircle />
             </div>
             Open profile
           </DropdownMenu.Item>
@@ -60,13 +60,13 @@ export const ActiveAccount = ({ user }: { user: any }) => {
           <DropdownMenu.Separator className="m-1 h-px bg-zinc-700/50" />
           <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500">
             <div className="absolute left-0 inline-flex w-6 items-center justify-center">
-              <GearIcon />
+              <Settings />
             </div>
             Settings
           </DropdownMenu.Item>
           <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500">
             <div className="absolute left-0 inline-flex w-6 items-center justify-center">
-              <ExitIcon />
+              <LogOut />
             </div>
             Logout
           </DropdownMenu.Item>

src/components/multiAccounts/index.tsx

@@ -5,8 +5,8 @@ import { APP_VERSION } from '@stores/constants';
 
 import LumeSymbol from '@assets/icons/Lume';
 
-import { PlusIcon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
+import { Plus } from 'iconoir-react';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -50,7 +50,7 @@ export default function MultiAccounts() {
           href="/onboarding"
           className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
         >
-          <PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
+          <Plus width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
         </Link>
       </div>
       <div className="flex flex-col gap-0.5 text-center">

src/components/navigation/channels.tsx

@@ -1,7 +1,7 @@
 import ChannelList from '@components/channels/channelList';
 
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { TriangleUpIcon } from '@radix-ui/react-icons';
+import { NavArrowUp } from 'iconoir-react';
 import { useState } from 'react';
 
 export default function Channels() {
@@ -16,7 +16,7 @@ export default function Channels() {
               open ? 'rotate-180' : ''
             }`}
           >
-            <TriangleUpIcon className="h-4 w-4 text-zinc-700" />
+            <NavArrowUp width={16} height={16} className="text-zinc-700" />
           </div>
           <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
         </Collapsible.Trigger>

src/components/navigation/chats.tsx

@@ -1,7 +1,7 @@
 import ChatList from '@components/chats/chatList';
 
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { TriangleUpIcon } from '@radix-ui/react-icons';
+import { NavArrowUp } from 'iconoir-react';
 import { useState } from 'react';
 
 export default function Chats() {
@@ -16,7 +16,7 @@ export default function Chats() {
               open ? 'rotate-180' : ''
             }`}
           >
-            <TriangleUpIcon className="h-4 w-4 text-zinc-700" />
+            <NavArrowUp width={16} height={16} className="text-zinc-700" />
           </div>
           <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Chats</h3>
         </Collapsible.Trigger>

src/components/navigation/newsfeed.tsx

@@ -1,7 +1,7 @@
 import ActiveLink from '@components/activeLink';
 
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { TriangleUpIcon } from '@radix-ui/react-icons';
+import { NavArrowUp } from 'iconoir-react';
 import { useState } from 'react';
 
 export default function Newsfeed() {
@@ -16,7 +16,7 @@ export default function Newsfeed() {
               open ? 'rotate-180' : ''
             }`}
           >
-            <TriangleUpIcon className="h-4 w-4 text-zinc-700" />
+            <NavArrowUp width={16} height={16} className="text-zinc-700" />
           </div>
           <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
         </Collapsible.Trigger>

src/components/note/meta/comment.tsx

@@ -4,11 +4,9 @@ import { UserExtend } from '@components/user/extend';
 
 import { dateToUnix } from '@utils/getDate';
 
-import CommentIcon from '@assets/icons/comment';
-
 import * as Dialog from '@radix-ui/react-dialog';
-import { SizeIcon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
+import { MultiBubble, OpenNewWindow } from 'iconoir-react';
 import { useRouter } from 'next/router';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { memo, useContext, useState } from 'react';
@@ -59,7 +57,7 @@ export const NoteComment = memo(function NoteComment({
       <Dialog.Trigger asChild>
         <button className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
           <div className="rounded-md p-1 group-hover:bg-zinc-800">
-            <CommentIcon className="h-5 w-5 text-zinc-500" />
+            <MultiBubble width={20} height={20} className="text-zinc-500" />
           </div>
           <span>{count}</span>
         </button>
@@ -111,7 +109,7 @@ export const NoteComment = memo(function NoteComment({
                           onClick={() => openThread()}
                           className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700"
                         >
-                          <SizeIcon className="h-4 w-4 text-zinc-400" />
+                          <OpenNewWindow width={16} height={16} className="text-zinc-400" />
                         </button>
                         <div className="flex items-center gap-2 pl-2"></div>
                       </div>

src/components/note/meta/reaction.tsx

@@ -2,10 +2,8 @@ import { RelayContext } from '@components/relaysProvider';
 
 import { dateToUnix } from '@utils/getDate';
 
-import LikeIcon from '@assets/icons/like';
-import LikedIcon from '@assets/icons/liked';
-
 import useLocalStorage from '@rehooks/local-storage';
+import { Heart } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { memo, useContext, useEffect, useState } from 'react';
 
@@ -54,7 +52,11 @@ export const NoteReaction = memo(function NoteReaction({
   return (
     <button onClick={(e) => handleLike(e)} className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
       <div className="rounded-md p-1 group-hover:bg-zinc-800">
-        {isReact ? <LikedIcon className="h-5 w-5 text-red-500" /> : <LikeIcon className="h-5 w-5 text-zinc-500" />}
+        {isReact ? (
+          <Heart width={20} height={20} className="fill-red-500" />
+        ) : (
+          <Heart width={20} height={20} className="text-zinc-500" />
+        )}
       </div>
       <span>{like}</span>
     </button>

src/components/user/extend.tsx

@@ -5,9 +5,9 @@ import { DEFAULT_AVATAR } from '@stores/constants';
 import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { MoreHoriz } from 'iconoir-react';
 
 dayjs.extend(relativeTime);
 
@@ -35,7 +35,7 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
           </div>
           <div>
             <button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
-              <DotsHorizontalIcon className="h-3 w-3 text-zinc-500" />
+              <MoreHoriz width={12} height={12} className="text-zinc-500" />
             </button>
           </div>
         </div>

src/components/user/large.tsx

@@ -5,9 +5,9 @@ import { DEFAULT_AVATAR } from '@stores/constants';
 import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { MoreHoriz } from 'iconoir-react';
 
 dayjs.extend(relativeTime);
 
@@ -36,7 +36,7 @@ export const UserLarge = ({ pubkey, time }: { pubkey: string; time: number }) =>
           </div>
           <div>
             <button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
-              <DotsHorizontalIcon className="h-3 w-3 text-zinc-500" />
+              <MoreHoriz width={12} height={12} className="text-zinc-500" />
             </button>
           </div>
         </div>

src/pages/newsfeed/following.tsx

@@ -10,7 +10,7 @@ import { hasNewerNoteAtom } from '@stores/note';
 import { dateToUnix } from '@utils/getDate';
 import { filterDuplicateParentID } from '@utils/transform';
 
-import { ArrowUpIcon } from '@radix-ui/react-icons';
+import { ArrowUp } from 'iconoir-react';
 import { useAtom } from 'jotai';
 import {
   JSXElementConstructor,
@@ -97,7 +97,7 @@ export default function Page() {
             onClick={() => loadLatest()}
             className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 pl-3 pr-3.5 text-sm shadow-md shadow-fuchsia-800/20 active:translate-y-1"
           >
-            <ArrowUpIcon className="h-3.5 w-3.5" />
+            <ArrowUp width={14} height={14} />
             Load latest
           </button>
         </div>

src/pages/onboarding/create/index.tsx

@@ -2,7 +2,7 @@ import BaseLayout from '@layouts/base';
 
 import { RelayContext } from '@components/relaysProvider';
 
-import { ArrowLeftIcon, EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
+import { ArrowLeft, EyeClose, EyeEmpty } from 'iconoir-react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
@@ -95,7 +95,7 @@ export default function Page() {
           onClick={() => goBack()}
           className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
         >
-          <ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+          <ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
         </button>
         <div>
           <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
@@ -131,9 +131,9 @@ export default function Page() {
                   className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
                 >
                   {type === 'password' ? (
-                    <EyeClosedIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-200" />
+                    <EyeClose width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
                   ) : (
-                    <EyeOpenIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-200" />
+                    <EyeEmpty width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
                   )}
                 </button>
               </div>

src/pages/onboarding/create/step-2.tsx

@@ -6,8 +6,8 @@ import { UserBase } from '@components/user/base';
 import { fetchMetadata } from '@utils/metadata';
 import { followsTag } from '@utils/transform';
 
-import { CheckCircledIcon } from '@radix-ui/react-icons';
 import { createClient } from '@supabase/supabase-js';
+import { CheckCircle } from 'iconoir-react';
 import { useRouter } from 'next/router';
 import { getEventHash, signEvent } from 'nostr-tools';
 import {
@@ -146,7 +146,7 @@ export default function Page() {
               <UserBase pubkey={item.pubkey} />
               {follows.includes(item.pubkey) && (
                 <div>
-                  <CheckCircledIcon className="h-4 w-4 text-green-400" />
+                  <CheckCircle width={16} height={16} className="text-zinc-400" />
                 </div>
               )}
             </button>

src/pages/onboarding/index.tsx

@@ -1,6 +1,6 @@
 import BaseLayout from '@layouts/base';
 
-import { ArrowRightIcon } from '@radix-ui/react-icons';
+import { ArrowRight } from 'iconoir-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
@@ -115,7 +115,7 @@ export default function Page() {
             className="relative inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full bg-zinc-900 px-6 text-lg font-medium ring-1 ring-zinc-800 hover:bg-zinc-800"
           >
             Create new key
-            <ArrowRightIcon className="h-5 w-5" />
+            <ArrowRight width={20} height={20} />
           </Link>
           <Link
             href="/onboarding/login"

src/pages/onboarding/login/index.tsx

@@ -1,6 +1,6 @@
 import BaseLayout from '@layouts/base';
 
-import { ArrowLeftIcon, LightningBoltIcon } from '@radix-ui/react-icons';
+import { ArrowLeft, CableTag } from 'iconoir-react';
 import { useRouter } from 'next/router';
 import { nip19 } from 'nostr-tools';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
@@ -64,7 +64,7 @@ export default function Page() {
           onClick={() => goBack()}
           className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
         >
-          <ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+          <ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
         </button>
         <div>
           <h1 className="bg-gradient-to-br from-zinc-200 via-white to-zinc-300 bg-clip-text text-3xl font-semibold text-transparent">
@@ -80,7 +80,7 @@ export default function Page() {
               {/* #TODO: add function */}
               <button className="inline-flex w-full transform items-center justify-center gap-1.5 rounded-lg bg-zinc-700 px-3.5 py-2.5 font-medium text-zinc-200 shadow-input ring-1 ring-zinc-600 active:translate-y-1">
                 {/* #TODO: change to nostr connect logo */}
-                <LightningBoltIcon className="h-5 w-5 text-fuchsia-500" />
+                <CableTag width={20} height={20} className="text-fuchsia-500" />
                 <span>Continue with Nostr Connect</span>
               </button>
             </div>