From 4102b69ca4c9256d921060647c2a00cd1e434ced Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Sun, 27 Jun 2021 12:17:59 +0200
Subject: [PATCH] Update: Changed icon pack to Boxicons

---
 src/components/common/ChannelIcon.tsx         |  4 +--
 src/components/common/ServerHeader.tsx        |  4 +--
 .../common/messaging/MessageBox.tsx           |  2 +-
 .../attachments/AttachmentActions.tsx         | 16 +++++-----
 .../messaging/attachments/MessageReply.tsx    |  6 ++--
 .../common/messaging/bars/FilePreview.tsx     |  4 +--
 .../common/messaging/bars/JumpToBottom.tsx    |  4 +--
 .../common/messaging/bars/ReplyBar.tsx        |  6 ++--
 .../messaging/embed/EmbedMediaActions.tsx     |  4 +--
 src/components/common/user/UserHeader.tsx     |  4 +--
 src/components/common/user/UserIcon.tsx       |  4 +--
 .../navigation/BottomNavigation.tsx           |  6 ++--
 .../navigation/items/ButtonItem.tsx           |  4 +--
 .../navigation/left/HomeSidebar.tsx           |  6 ++--
 .../navigation/left/ServerListSidebar.tsx     |  6 ++--
 src/components/ui/Category.tsx                |  2 +-
 src/components/ui/Checkbox.tsx                |  3 +-
 src/components/ui/ColourSwatches.tsx          |  7 ++--
 src/components/ui/IconButton.tsx              |  4 +--
 src/components/ui/Radio.tsx                   |  6 ++--
 src/components/ui/Tip.tsx                     |  4 +--
 .../intermediate/popovers/ChannelInfo.tsx     |  2 +-
 .../intermediate/popovers/UserProfile.tsx     | 11 +++----
 src/context/revoltjs/FileUploads.tsx          |  2 +-
 src/context/revoltjs/RequiresOnline.tsx       |  2 +-
 src/lib/ContextMenus.tsx                      |  9 +++---
 src/pages/channels/ChannelHeader.tsx          | 10 +++---
 src/pages/channels/actions/HeaderActions.tsx  |  6 ++--
 src/pages/channels/voice/VoiceHeader.tsx      |  6 ++--
 src/pages/friends/Friend.tsx                  |  4 +--
 src/pages/friends/Friends.tsx                 |  2 +-
 src/pages/invite/Invite.tsx                   |  4 +--
 src/pages/login/forms/Form.tsx                |  4 +--
 src/pages/settings/ChannelSettings.tsx        |  4 +--
 src/pages/settings/GenericSettings.tsx        |  4 +--
 src/pages/settings/ServerSettings.tsx         | 11 ++++---
 src/pages/settings/Settings.tsx               | 32 +++++++++----------
 src/pages/settings/panes/Account.tsx          |  6 ++--
 src/pages/settings/panes/Sessions.tsx         |  2 +-
 src/pages/settings/server/Invites.tsx         |  2 +-
 40 files changed, 113 insertions(+), 116 deletions(-)

diff --git a/src/components/common/ChannelIcon.tsx b/src/components/common/ChannelIcon.tsx
index fb4d1a5..c0d596e 100644
--- a/src/components/common/ChannelIcon.tsx
+++ b/src/components/common/ChannelIcon.tsx
@@ -1,6 +1,6 @@
 import { useContext } from "preact/hooks";
 import { Channels } from "revolt.js/dist/api/objects";
-import { Hash, Volume2 } from "@styled-icons/feather";
+import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
 import { ImageIconBase, IconBaseProps } from "./IconBase";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
@@ -21,7 +21,7 @@ export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLI
         if (isServerChannel) {
             if (target?.channel_type === 'VoiceChannel') {
                 return (
-                    <Volume2 size={size} />
+                    <VolumeFull size={size} />
                 )
             } else {
                 return (
diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx
index e2a89df..de7a39f 100644
--- a/src/components/common/ServerHeader.tsx
+++ b/src/components/common/ServerHeader.tsx
@@ -2,7 +2,7 @@ import Header from "../ui/Header";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import IconButton from "../ui/IconButton";
-import { Settings } from "@styled-icons/feather";
+import { Cog } from "@styled-icons/boxicons-solid";
 import { Server } from "revolt.js/dist/api/objects";
 import { ServerPermission } from "revolt.js/dist/api/permissions";
 import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
@@ -30,7 +30,7 @@ export default function ServerHeader({ server, ctx }: Props) {
             { (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
                 <Link to={`/server/${server._id}/settings`}>
                     <IconButton>
-                        <Settings size={24} />
+                        <Cog size={24} />
                     </IconButton>
                 </Link>
             </div> }
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index ea8391a..da1fe69 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -4,7 +4,7 @@ import { Channel } from "revolt.js";
 import styled from "styled-components";
 import { defer } from "../../../lib/defer";
 import IconButton from "../../ui/IconButton";
-import { Send, X } from '@styled-icons/feather';
+import { Send, X } from '@styled-icons/boxicons-regular';
 import { debounce } from "../../../lib/debounce";
 import Axios, { CancelTokenSource } from "axios";
 import { useTranslation } from "../../../lib/i18n";
diff --git a/src/components/common/messaging/attachments/AttachmentActions.tsx b/src/components/common/messaging/attachments/AttachmentActions.tsx
index cf701ad..f667f16 100644
--- a/src/components/common/messaging/attachments/AttachmentActions.tsx
+++ b/src/components/common/messaging/attachments/AttachmentActions.tsx
@@ -4,7 +4,7 @@ import IconButton from '../../../ui/IconButton';
 import { Attachment } from "revolt.js/dist/api/objects";
 import { determineFileSize } from '../../../../lib/fileSize';
 import { AppContext } from '../../../../context/revoltjs/RevoltClient';
-import { Download, ExternalLink, File, Headphones, Video } from '@styled-icons/feather';
+import { Download, LinkExternal, File, Headphone, Video } from '@styled-icons/boxicons-regular';
 
 interface Props {
     attachment: Attachment;
@@ -30,7 +30,7 @@ export default function AttachmentActions({ attachment }: Props) {
                     </div>
                     <a href={open_url} target="_blank">
                         <IconButton>
-                            <ExternalLink size={24} />
+                            <LinkExternal size={24} />
                         </IconButton>
                     </a>
                     <a href={download_url} download target="_blank">
@@ -43,14 +43,14 @@ export default function AttachmentActions({ attachment }: Props) {
         case 'Audio':
             return (
                 <div className={styles.actions}>
-                    <Headphones size={24} strokeWidth={1.5} />
+                    <Headphone size={24} />
                     <div className={styles.info}>
                         <span className={styles.filename}>{filename}</span>
                         <span className={styles.filesize}>{filesize}</span>
                     </div>
                     <a href={download_url} download target="_blank">
                         <IconButton>
-                            <Download size={24} strokeWidth={1.5} />
+                            <Download size={24} />
                         </IconButton>
                     </a>
                 </div>
@@ -58,14 +58,14 @@ export default function AttachmentActions({ attachment }: Props) {
         case 'Video':
             return (
                 <div className={styles.actions}>
-                    <Video size={24} strokeWidth={1.5} />
+                    <Video size={24} />
                     <div className={styles.info}>
                         <span className={styles.filename}>{filename}</span>
                         <span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
                     </div>
                     <a href={download_url} download target="_blank">
                         <IconButton>
-                            <Download size={24} strokeWidth={1.5}/>
+                            <Download size={24} />
                         </IconButton>
                     </a>
                 </div>
@@ -73,14 +73,14 @@ export default function AttachmentActions({ attachment }: Props) {
         default:
             return (
                 <div className={styles.actions}>
-                    <File size={24} strokeWidth={1.5} />
+                    <File size={24} />
                     <div className={styles.info}>
                         <span className={styles.filename}>{filename}</span>
                         <span className={styles.filesize}>{filesize}</span>
                     </div>
                     <a href={download_url} download target="_blank">
                         <IconButton>
-                            <Download size={24} strokeWidth={1.5} />
+                            <Download size={24} />
                         </IconButton>
                     </a>
                 </div>
diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx
index 74952ea..7019538 100644
--- a/src/components/common/messaging/attachments/MessageReply.tsx
+++ b/src/components/common/messaging/attachments/MessageReply.tsx
@@ -2,7 +2,7 @@ import { Text } from "preact-i18n";
 import UserShort from "../../user/UserShort";
 import styled, { css } from "styled-components";
 import Markdown from "../../../markdown/Markdown";
-import { CornerUpRight, File } from "@styled-icons/feather";
+import { Reply, File } from "@styled-icons/boxicons-regular";
 import { useUser } from "../../../../context/revoltjs/hooks";
 import { useRenderState } from "../../../../lib/renderer/Singleton";
 
@@ -52,7 +52,7 @@ export function MessageReply({ index, channel, id }: Props) {
     if (!message) {
         return (
             <ReplyBase head={index === 0} fail>
-                <CornerUpRight size={16} />
+                <Reply size={16} />
                 <span><Text id="app.main.channel.misc.failed_load" /></span>
             </ReplyBase>
         )
@@ -62,7 +62,7 @@ export function MessageReply({ index, channel, id }: Props) {
 
     return (
         <ReplyBase head={index === 0}>
-            <CornerUpRight size={16} />
+            <Reply size={16} />
             <UserShort user={user} size={16} />
             { message.attachments && message.attachments.length > 0 && <File size={16} /> }
             <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
diff --git a/src/components/common/messaging/bars/FilePreview.tsx b/src/components/common/messaging/bars/FilePreview.tsx
index 44d94f5..9f0a98c 100644
--- a/src/components/common/messaging/bars/FilePreview.tsx
+++ b/src/components/common/messaging/bars/FilePreview.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
 import { useEffect, useState } from 'preact/hooks';
 import { determineFileSize } from '../../../../lib/fileSize';
-import { XCircle, Plus, Share, X, FileText } from "@styled-icons/feather";
+import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
 
 interface Props {
     state: UploadState,
@@ -133,7 +133,7 @@ function FileEntry({ file, remove, index }: { file: File, remove?: () => void, i
         <Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
             <PreviewBox onClick={remove}>
                 <EmptyEntry className="icon">
-                    <FileText size={36} />
+                    <File size={36} />
                 </EmptyEntry>
                 <div class="overlay"><XCircle size={36} /></div>
             </PreviewBox>
diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx
index 14b9a97..ff0f527 100644
--- a/src/components/common/messaging/bars/JumpToBottom.tsx
+++ b/src/components/common/messaging/bars/JumpToBottom.tsx
@@ -1,6 +1,6 @@
 import { Text } from "preact-i18n";
 import styled from "styled-components";
-import { ArrowDown } from "@styled-icons/feather";
+import { DownArrow } from "@styled-icons/boxicons-regular";
 import { SingletonMessageRenderer, useRenderState } from "../../../../lib/renderer/Singleton";
 
 const Bar = styled.div`
@@ -46,7 +46,7 @@ export default function JumpToBottom({ id }: { id: string }) {
         <Bar>
             <div onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
                 <div><Text id="app.main.channel.misc.viewing_old" /></div>
-                <div><Text id="app.main.channel.misc.jump_present" /> <ArrowDown size={18} strokeWidth={2}/></div>
+                <div><Text id="app.main.channel.misc.jump_present" /> <DownArrow size={18}/></div>
             </div>
         </Bar>
     )
diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx
index bfc550e..7ef6417 100644
--- a/src/components/common/messaging/bars/ReplyBar.tsx
+++ b/src/components/common/messaging/bars/ReplyBar.tsx
@@ -9,7 +9,7 @@ import { Reply } from "../../../../redux/reducers/queue";
 import { useUsers } from "../../../../context/revoltjs/hooks";
 import { internalSubscribe } from "../../../../lib/eventEmitter";
 import { useRenderState } from "../../../../lib/renderer/Singleton";
-import { AtSign, CornerUpRight, File, XCircle } from "@styled-icons/feather";
+import { At, Reply as ReplyIcon, File, XCircle } from "@styled-icons/boxicons-regular";
 
 interface Props {
     channel: string,
@@ -71,7 +71,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
                 return (
                     <Base key={reply.id}>
                         <ReplyBase preview>
-                            <CornerUpRight size={22} />
+                            <ReplyIcon size={22} />
                             <UserShort user={user} size={16} />
                             { message.attachments && message.attachments.length > 0 && <File size={16} /> }
                             <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
@@ -79,7 +79,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
                         <span class="actions">
                             <IconButton onClick={() => setReplies(replies.map((_, i) => i === index ? { ..._, mention: !_.mention } : _))}>
                                 <span class="toggle">
-                                    <AtSign size={16} /> { reply.mention ? 'ON' : 'OFF' }
+                                    <At size={16} /> { reply.mention ? 'ON' : 'OFF' }
                                 </span>
                             </IconButton>
                             <IconButton onClick={() => setReplies(replies.filter((_, i) => i !== index))}>
diff --git a/src/components/common/messaging/embed/EmbedMediaActions.tsx b/src/components/common/messaging/embed/EmbedMediaActions.tsx
index 9c11944..ab3d714 100644
--- a/src/components/common/messaging/embed/EmbedMediaActions.tsx
+++ b/src/components/common/messaging/embed/EmbedMediaActions.tsx
@@ -1,6 +1,6 @@
 import styles from './Embed.module.scss';
 import IconButton from '../../../ui/IconButton';
-import { ExternalLink } from '@styled-icons/feather';
+import { LinkExternal } from '@styled-icons/boxicons-regular';
 import { EmbedImage } from "revolt.js/dist/api/objects";
 
 interface Props {
@@ -18,7 +18,7 @@ export default function EmbedMediaActions({ embed }: Props) {
             </div>
             <a href={embed.url} target="_blank">
                 <IconButton>
-                    <ExternalLink size={24} />
+                    <LinkExternal size={24} />
                 </IconButton>
             </a>
         </div>
diff --git a/src/components/common/user/UserHeader.tsx b/src/components/common/user/UserHeader.tsx
index 848e8ce..dcd7630 100644
--- a/src/components/common/user/UserHeader.tsx
+++ b/src/components/common/user/UserHeader.tsx
@@ -8,7 +8,7 @@ import styled from "styled-components";
 import { Localizer } from 'preact-i18n';
 import { Link } from "react-router-dom";
 import IconButton from "../../ui/IconButton";
-import { Settings } from "@styled-icons/feather";
+import { Cog } from "@styled-icons/boxicons-solid";
 import { openContextMenu } from "preact-context-menu";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -76,7 +76,7 @@ export default function UserHeader({ user }: Props) {
             { !isTouchscreenDevice && <div className="actions">
                 <Link to="/settings">
                     <IconButton>
-                        <Settings size={24} />
+                        <Cog size={24} />
                     </IconButton>
                 </Link>
             </div> }
diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx
index 65418b7..85064c5 100644
--- a/src/components/common/user/UserIcon.tsx
+++ b/src/components/common/user/UserIcon.tsx
@@ -1,6 +1,6 @@
 import { User } from "revolt.js";
 import { useContext } from "preact/hooks";
-import { MicOff } from "@styled-icons/feather";
+import { MicrophoneOff } from "@styled-icons/boxicons-regular";
 import styled, { css } from "styled-components";
 import { Users } from "revolt.js/dist/api/objects";
 import { ThemeContext } from "../../../context/Theme";
@@ -83,7 +83,7 @@ export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGEle
                     width="10"
                     height="10">
                     <VoiceIndicator status={props.voice}>
-                        {props.voice === "muted" && <MicOff size={6} />}
+                        {props.voice === "muted" && <MicrophoneOff size={6} />}
                     </VoiceIndicator>
                 </foreignObject>
             )}
diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
index 4afa8f9..c88fa2d 100644
--- a/src/components/navigation/BottomNavigation.tsx
+++ b/src/components/navigation/BottomNavigation.tsx
@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 import { useSelf } from "../../context/revoltjs/hooks";
 import { useHistory, useLocation } from "react-router";
 import ConditionalLink from "../../lib/ConditionalLink";
-import { MessageCircle, Users } from "@styled-icons/feather";
+import { MessageRounded, Group } from "@styled-icons/boxicons-regular";
 
 const NavigationBase = styled.div`
     z-index: 10;
@@ -50,13 +50,13 @@ export default function BottomNavigation() {
                             }
                         }
                     }}>
-                    <MessageCircle size={26} />
+                    <MessageRounded size={26} />
                 </IconButton>
             </Button>
             <Button active={friendsActive}>
                 <ConditionalLink active={friendsActive} to="/friends">
                     <IconButton>
-                        <Users size={26} />
+                        <Group size={26} />
                     </IconButton>
                 </ConditionalLink>
             </Button>
diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx
index d4e1982..6f82c5d 100644
--- a/src/components/navigation/items/ButtonItem.tsx
+++ b/src/components/navigation/items/ButtonItem.tsx
@@ -3,7 +3,7 @@ import styles from "./Item.module.scss";
 import Tooltip from '../../common/Tooltip';
 import IconButton from '../../ui/IconButton';
 import { Localizer, Text } from "preact-i18n";
-import { X, Zap } from "@styled-icons/feather";
+import { X, Crown } from "@styled-icons/boxicons-regular";
 import { Children } from "../../../types/Preact";
 import UserIcon from '../../common/user/UserIcon';
 import ChannelIcon from '../../common/ChannelIcon';
@@ -65,7 +65,7 @@ export function UserButton({ active, alert, alertCount, user, context, channel }
                                     <Text id="app.main.groups.owner" />
                                 }
                             >
-                                <Zap size={20} />
+                                <Crown size={20} />
                             </Tooltip>
                         </Localizer>
                 )}
diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx
index d9ea719..13daf26 100644
--- a/src/components/navigation/left/HomeSidebar.tsx
+++ b/src/components/navigation/left/HomeSidebar.tsx
@@ -1,6 +1,6 @@
 import { Localizer, Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
-import { Home, Users, Tool, Save } from "@styled-icons/feather";
+import { Home, Group, Wrench, Save } from "@styled-icons/boxicons-regular";
 
 import Category from '../../ui/Category';
 import PaintCounter from "../../../lib/PaintCounter";
@@ -83,7 +83,7 @@ function HomeSidebar(props: Props) {
                                     ) !== "undefined" ? 'unread' : undefined
                                 }
                             >
-                                <Users size={20} />
+                                <Group size={20} />
                                 <span><Text id="app.navigation.tabs.friends" /></span>
                             </ButtonItem>
                         </ConditionalLink>
@@ -98,7 +98,7 @@ function HomeSidebar(props: Props) {
                 {import.meta.env.DEV && (
                     <Link to="/dev">
                         <ButtonItem active={pathname === "/dev"}>
-                            <Tool size={20} />
+                            <Wrench size={20} />
                             <span><Text id="app.navigation.tabs.dev" /></span>
                         </ButtonItem>
                     </Link>
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 4f25f7d..75d4725 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -4,7 +4,7 @@ import { mapChannelWithUnread } from "./common";
 import styled, { css } from "styled-components";
 import ServerIcon from "../../common/ServerIcon";
 import { Children } from "../../../types/Preact";
-import { PlusCircle } from "@styled-icons/feather";
+import { Plus } from "@styled-icons/boxicons-regular";
 import PaintCounter from "../../../lib/PaintCounter";
 import { attachContextMenu } from 'preact-context-menu';
 import { connectState } from "../../../redux/connector";
@@ -51,7 +51,7 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
 }
 
 const ServersBase = styled.div`
-    width: 52px;
+    width: 72px;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -183,7 +183,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
                     })
                 }
                 <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
-                    <PlusCircle size={36} />
+                    <Plus size={36} />
                 </IconButton>
                 <PaintCounter small />
             </ServerList>
diff --git a/src/components/ui/Category.tsx b/src/components/ui/Category.tsx
index 4b67122..2889e2f 100644
--- a/src/components/ui/Category.tsx
+++ b/src/components/ui/Category.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import { Children } from "../../types/Preact";
-import { Plus } from "@styled-icons/feather";
+import { Plus } from "@styled-icons/boxicons-regular";
 
 const CategoryBase = styled.div<Pick<Props, 'variant'>>`
     font-size: 12px;
diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
index e7cd62b..32020ba 100644
--- a/src/components/ui/Checkbox.tsx
+++ b/src/components/ui/Checkbox.tsx
@@ -1,4 +1,4 @@
-import { Check } from "@styled-icons/feather";
+import { Check } from "@styled-icons/boxicons-regular";
 import { Children } from "../../types/Preact";
 import styled, { css } from "styled-components";
 
@@ -59,7 +59,6 @@ const Checkmark = styled.div<{ checked: boolean }>`
 
     svg {
         color: var(--secondary-background);
-        stroke-width: 2;
     }
 
     ${(props) =>
diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx
index e6e2478..cbc13bd 100644
--- a/src/components/ui/ColourSwatches.tsx
+++ b/src/components/ui/ColourSwatches.tsx
@@ -1,7 +1,6 @@
 import { useRef } from "preact/hooks";
-import { Check } from "@styled-icons/feather";
+import { Check, Pencil } from "@styled-icons/boxicons-regular";
 import styled, { css } from "styled-components";
-import { Pencil } from "@styled-icons/bootstrap";
 
 interface Props {
     value: string;
@@ -68,7 +67,7 @@ const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
                   height: 30px;
 
                   svg {
-                      stroke-width: 2;
+                      /*stroke-width: 2;*/
                   }
               `
             : css`
@@ -118,7 +117,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
                                 onClick={() => onChange(swatch)}
                             >
                                 {swatch === value && (
-                                    <Check size={18} strokeWidth={2} />
+                                    <Check size={18} />
                                 )}
                             </Swatch>
                         ))}
diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx
index 497f287..a0c7578 100644
--- a/src/components/ui/IconButton.tsx
+++ b/src/components/ui/IconButton.tsx
@@ -15,7 +15,7 @@ export default styled.div<Props>`
 
     fill: ${normal};
     color: ${normal};
-    stroke: ${normal};
+    /*stroke: ${normal};*/
 
     a {
         color: ${normal};
@@ -24,7 +24,7 @@ export default styled.div<Props>`
     &:hover {
         fill: ${hover};
         color: ${hover};
-        stroke: ${hover};
+        /*stroke: ${hover};*/
 
         a {
             color: ${hover};
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index d6beb9a..e988bbc 100644
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@@ -1,6 +1,6 @@
 import { Children } from "../../types/Preact";
 import styled, { css } from "styled-components";
-import { CircleFill } from "@styled-icons/bootstrap";
+import { Circle } from "@styled-icons/boxicons-regular";
 
 interface Props {
     children: Children;
@@ -48,7 +48,7 @@ const RadioBase = styled.label<BaseProps>`
 
         svg {
             color: var(--foreground);
-            stroke-width: 2;
+            /*stroke-width: 2;*/
         }
     }
 
@@ -95,7 +95,7 @@ export default function Radio(props: Props) {
             }
         >
             <div>
-                <CircleFill size={12} />
+                <Circle size={12} />
             </div>
             <input type="radio" checked={props.checked} />
             <span>
diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx
index b65ccc6..5ca8783 100644
--- a/src/components/ui/Tip.tsx
+++ b/src/components/ui/Tip.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Info } from "@styled-icons/feather";
+import { InfoCircle } from "@styled-icons/boxicons-regular";
 import { Children } from "../../types/Preact";
 
 export const TipBase = styled.div`
@@ -29,7 +29,7 @@ export const TipBase = styled.div`
 export default function Tip(props: { children: Children }) {
     return (
         <TipBase>
-            <Info size={20} strokeWidth={2} />
+            <InfoCircle size={20} />
             <span>{props.children}</span>
         </TipBase>
     );
diff --git a/src/context/intermediate/popovers/ChannelInfo.tsx b/src/context/intermediate/popovers/ChannelInfo.tsx
index 2abce2f..8b0b7dd 100644
--- a/src/context/intermediate/popovers/ChannelInfo.tsx
+++ b/src/context/intermediate/popovers/ChannelInfo.tsx
@@ -1,4 +1,4 @@
-import { X } from "@styled-icons/feather";
+import { X } from "@styled-icons/boxicons-regular";
 import styles from "./ChannelInfo.module.scss";
 import Modal from "../../../components/ui/Modal";
 import { getChannelName } from "../../revoltjs/util";
diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx
index afcc834..22167c5 100644
--- a/src/context/intermediate/popovers/UserProfile.tsx
+++ b/src/context/intermediate/popovers/UserProfile.tsx
@@ -6,7 +6,6 @@ import Modal from "../../../components/ui/Modal";
 import { Route } from "revolt.js/dist/api/routes";
 import { Users } from "revolt.js/dist/api/objects";
 import { useIntermediate } from "../Intermediate";
-import { CashStack } from "@styled-icons/bootstrap";
 import Preloader from "../../../components/ui/Preloader";
 import Tooltip from '../../../components/common/Tooltip';
 import IconButton from "../../../components/ui/IconButton";
@@ -15,7 +14,7 @@ import { UserPermission } from "revolt.js/dist/api/permissions";
 import UserIcon from '../../../components/common/user/UserIcon';
 import ChannelIcon from '../../../components/common/ChannelIcon';
 import UserStatus from '../../../components/common/user/UserStatus';
-import { Mail, Edit, UserPlus, Shield } from "@styled-icons/feather";
+import { Envelope, Edit, UserPlus, Shield, Money } from "@styled-icons/boxicons-regular";
 import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
 import { AppContext, ClientStatus, StatusContext } from "../../revoltjs/RevoltClient";
 import { useChannels, useForceUpdate, useUserPermission, useUsers } from "../../revoltjs/hooks";
@@ -160,7 +159,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
                                         onClose();
                                         history.push(`/open/${user_id}`);
                                     }}>
-                                    <Mail size={30} strokeWidth={1.5} />
+                                    <Envelope size={30} />
                                 </IconButton>
                             </Tooltip>
                         </Localizer>
@@ -172,13 +171,13 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
                                 if (dummy) return;
                                 history.push(`/settings/profile`);
                             }}>
-                            <Edit size={28} strokeWidth={1.5} />
+                            <Edit size={28} />
                         </IconButton>
                     )}
                     {(user.relationship === Users.Relationship.Incoming ||
                         user.relationship === Users.Relationship.None) && (
                         <IconButton onClick={() => client.users.addFriend(user.username)}>
-                            <UserPlus size={28} strokeWidth={1.5} />
+                            <UserPlus size={28} />
                         </IconButton>
                     )}
                 </div>
@@ -255,7 +254,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
                                             <Text id="app.special.popovers.user_profile.badges.supporter" />
                                         }
                                     >
-                                        <CashStack size={32} color="#efab44" />
+                                        <Money size={32} color="#efab44" />
                                     </Tooltip>
                                 ) : (
                                     <></>
diff --git a/src/context/revoltjs/FileUploads.tsx b/src/context/revoltjs/FileUploads.tsx
index 4be51c1..ab9156b 100644
--- a/src/context/revoltjs/FileUploads.tsx
+++ b/src/context/revoltjs/FileUploads.tsx
@@ -8,7 +8,7 @@ import { useContext, useEffect, useState } from "preact/hooks";
 import Preloader from "../../components/ui/Preloader";
 import { determineFileSize } from "../../lib/fileSize";
 import IconButton from '../../components/ui/IconButton';
-import { Edit, Plus, X, XCircle } from "@styled-icons/feather";
+import { Edit, Plus, X, XCircle } from "@styled-icons/boxicons-regular";
 import { useIntermediate } from "../intermediate/Intermediate";
 
 type Props = {
diff --git a/src/context/revoltjs/RequiresOnline.tsx b/src/context/revoltjs/RequiresOnline.tsx
index 20779e5..ff2dd19 100644
--- a/src/context/revoltjs/RequiresOnline.tsx
+++ b/src/context/revoltjs/RequiresOnline.tsx
@@ -2,7 +2,7 @@ import { Text } from "preact-i18n";
 import styled from "styled-components";
 import { useContext } from "preact/hooks";
 import { Children } from "../../types/Preact";
-import { WifiOff } from "@styled-icons/feather";
+import { WifiOff } from "@styled-icons/boxicons-regular";
 import Preloader from "../../components/ui/Preloader";
 import { ClientStatus, StatusContext } from "./RevoltClient";
 
diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx
index 3636bdf..c184445 100644
--- a/src/lib/ContextMenus.tsx
+++ b/src/lib/ContextMenus.tsx
@@ -19,9 +19,8 @@ import { Children } from "../types/Preact";
 import LineDivider from "../components/ui/LineDivider";
 import { connectState } from "../redux/connector";
 import { internalEmit } from "./eventEmitter";
-import { AtSign, Bell, BellOff, Check, CheckSquare, ChevronRight, Slash, Square } from "@styled-icons/feather";
+import { At, Bell, BellOff, Check, CheckSquare, ChevronRight, Block, Square, LeftArrowAlt } from "@styled-icons/boxicons-regular";
 import { getNotificationState, Notifications, NotificationState } from "../redux/reducers/notifications";
-import { ArrowLeft } from "@styled-icons/bootstrap";
 
 interface ContextMenuData {
     user?: string;
@@ -718,16 +717,16 @@ function ContextMenus(props: Props) {
                             <MenuItem data={{ action: "set_notification_state", key: channel._id, state: key }}>
                                 { icon }
                                 <Text id={`app.main.channel.notifications.${key}`} />
-                                { (state === undefined && actual === key) && <div className="tip"><ArrowLeft size={20} /></div> }
+                                { (state === undefined && actual === key) && <div className="tip"><LeftArrowAlt size={20} /></div> }
                                 { (state === key) && <div className="tip"><Check size={20} /></div> }
                             </MenuItem>
                         );
                     }
 
                     generate('all', <Bell size={24} />);
-                    generate('mention', <AtSign size={24} />);
+                    generate('mention', <At size={24} />);
                     generate('muted', <BellOff size={24} />);
-                    generate('none', <Slash size={24} />);
+                    generate('none', <Block size={24} />);
 
                     return elements;
                 }}
diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx
index 24a23f3..6834c18 100644
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/src/pages/channels/ChannelHeader.tsx
@@ -7,7 +7,7 @@ import Markdown from "../../components/markdown/Markdown";
 import { getChannelName } from "../../context/revoltjs/util";
 import UserStatus from "../../components/common/user/UserStatus";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
-import { Save, AtSign, Users, Hash } from "@styled-icons/feather";
+import { Save, At, Group, Hash } from "@styled-icons/boxicons-regular";
 import { useStatusColour } from "../../components/common/user/UserIcon";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 
@@ -57,18 +57,18 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
     let icon, recipient;
     switch (channel.channel_type) {
         case "SavedMessages":
-            icon = <Save size={20} strokeWidth={1.5} />;
+            icon = <Save size={20} />;
             break;
         case "DirectMessage":
-            icon = <AtSign size={20} strokeWidth={1.5} />;
+            icon = <At size={20} />;
             const uid = client.channels.getRecipient(channel._id);
             recipient = client.users.get(uid);
             break;
         case "Group":
-            icon = <Users size={20} strokeWidth={1.5} />;
+            icon = <Group size={20} />;
             break;
         case "TextChannel":
-            icon = <Hash size={20} strokeWidth={1.5} />;
+            icon = <Hash size={20} />;
             break;
     }
 
diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx
index 368f603..d3f7eee 100644
--- a/src/pages/channels/actions/HeaderActions.tsx
+++ b/src/pages/channels/actions/HeaderActions.tsx
@@ -6,7 +6,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { VoiceContext, VoiceOperationsContext, VoiceStatus } from "../../../context/Voice";
-import { UserPlus, Settings, Sidebar as SidebarIcon, PhoneCall, PhoneOff } from "@styled-icons/feather";
+import { UserPlus, Cog, Sidebar as SidebarIcon, PhoneCall, PhoneOutgoing } from "@styled-icons/boxicons-regular";
 
 export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderProps) {
     const { openScreen } = useIntermediate();
@@ -30,7 +30,7 @@ export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderP
                         <UserPlus size={22} />
                     </IconButton>
                     <IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
-                        <Settings size={22} />
+                        <Cog size={22} />
                     </IconButton>
                 </>
             ) }
@@ -55,7 +55,7 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, 'channel'>) {
         if (voice.roomId === channel._id) {
             return (
                 <IconButton onClick={disconnect}>
-                    <PhoneOff size={22} />
+                    <PhoneOutgoing size={22} />
                 </IconButton>
             )
         } else {
diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx
index b99b0f0..d20a6c3 100644
--- a/src/pages/channels/voice/VoiceHeader.tsx
+++ b/src/pages/channels/voice/VoiceHeader.tsx
@@ -1,7 +1,7 @@
 import { Text } from "preact-i18n";
 import styled from "styled-components";
 import { useContext } from "preact/hooks";
-import { BarChart } from "@styled-icons/bootstrap";
+import { BarChart } from "@styled-icons/boxicons-regular";
 import Button from "../../../components/ui/Button";
 import UserIcon from "../../../components/common/user/UserIcon";
 import { useForceUpdate, useSelf, useUsers } from "../../../context/revoltjs/hooks";
@@ -93,7 +93,7 @@ export default function VoiceHeader({ id }: Props) {
                 )}
             </div>
             <div className="status">
-                <BarChart size={20} strokeWidth={2} />
+                <BarChart size={20} />
                 { status === VoiceStatus.CONNECTED && <Text id="app.main.channel.voice.connected" /> }
             </div>
             <div className="actions">
@@ -145,7 +145,7 @@ export default function VoiceHeader({ id }: Props) {
                                 )}
                             </div>
                             <div className={styles.status}>
-                                <BarChart size={20} strokeWidth={2} />
+                                <BarChart size={20} />
                                 { voice.status === VoiceStatus.CONNECTED && <Text id="app.main.channel.voice.connected" /> }
                             </div>
                             <div className={styles.actions}>
diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx
index bcacd29..a33c342 100644
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import styles from "./Friend.module.scss";
 import { useContext } from "preact/hooks";
 import { Children } from "../../types/Preact";
-import { X, Plus, Mail } from "@styled-icons/feather";
+import { X, Plus, Envelope } from "@styled-icons/boxicons-regular";
 import IconButton from "../../components/ui/IconButton";
 import { attachContextMenu } from "preact-context-menu";
 import { User, Users } from "revolt.js/dist/api/objects";
@@ -30,7 +30,7 @@ export function Friend({ user }: Props) {
             <IconButton type="circle"
                 onClick={stopPropagation}>
                 <Link to={'/open/' + user._id}>
-                    <Mail size={20} />
+                    <Envelope size={20} />
                 </Link>
             </IconButton>
         );
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index 9460f8e..c331f34 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -1,5 +1,5 @@
 import styles from "./Friend.module.scss";
-import { UserPlus } from "@styled-icons/feather";
+import { UserPlus } from "@styled-icons/boxicons-regular";
 
 import { Friend } from "./Friend";
 import { Text } from "preact-i18n";
diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx
index 080f3cb..8fc2a1f 100644
--- a/src/pages/invite/Invite.tsx
+++ b/src/pages/invite/Invite.tsx
@@ -1,6 +1,6 @@
 import styles from './Invite.module.scss';
 import Button from '../../components/ui/Button';
-import { ArrowLeft } from "@styled-icons/feather";
+import { LeftArrowAlt } from "@styled-icons/boxicons-regular";
 import Overline from '../../components/ui/Overline';
 import { Invites } from "revolt.js/dist/api/objects";
 import Preloader from '../../components/ui/Preloader';
@@ -44,7 +44,7 @@ export default function Invite() {
     return (
         <div className={styles.invite} style={{ backgroundImage: invite.server_banner ? `url('${client.generateFileURL(invite.server_banner)}')` : undefined }}>
             <div className={styles.leave}>
-                <ArrowLeft size={32} onClick={() => history.push('/')} />
+                <LeftArrowAlt size={32} onClick={() => history.push('/')} />
             </div>
 
             { !processing && 
diff --git a/src/pages/login/forms/Form.tsx b/src/pages/login/forms/Form.tsx
index 5d8911b..d1e0e8c 100644
--- a/src/pages/login/forms/Form.tsx
+++ b/src/pages/login/forms/Form.tsx
@@ -5,7 +5,7 @@ import styles from "../Login.module.scss";
 import { useForm } from "react-hook-form";
 import { MailProvider } from "./MailProvider";
 import { useContext, useState } from "preact/hooks";
-import { CheckCircle, Mail } from "@styled-icons/feather";
+import { CheckCircle, Envelope } from "@styled-icons/boxicons-regular";
 import { takeError } from "../../../context/revoltjs/util";
 import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
@@ -109,7 +109,7 @@ export function Form({ page, callback }: Props) {
             <div className={styles.success}>
                 {client.configuration?.features.email ? (
                     <>
-                        <Mail size={72} />
+                        <Envelope size={72} />
                         <h2>
                             <Text id="login.check_mail" />
                         </h2>
diff --git a/src/pages/settings/ChannelSettings.tsx b/src/pages/settings/ChannelSettings.tsx
index cd4b0f4..4039779 100644
--- a/src/pages/settings/ChannelSettings.tsx
+++ b/src/pages/settings/ChannelSettings.tsx
@@ -1,5 +1,5 @@
 import { Text } from "preact-i18n";
-import { List } from "@styled-icons/feather";
+import { ListUl } from "@styled-icons/boxicons-regular";
 import Category from "../../components/ui/Category";
 import { GenericSettings } from "./GenericSettings";
 import { getChannelName } from "../../context/revoltjs/util";
@@ -30,7 +30,7 @@ export default function ChannelSettings() {
                 {
                     category: <Category variant="uniform" text={getChannelName(ctx.client, channel, true)} />,
                     id: 'overview',
-                    icon: <List size={20} strokeWidth={2} />,
+                    icon: <ListUl size={20} />,
                     title: <Text id="app.settings.channel_pages.overview.title" />
                 }
             ]}
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index 89579f4..e32c793 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -6,7 +6,7 @@ import Header from '../../components/ui/Header';
 import Category from '../../components/ui/Category';
 import IconButton from "../../components/ui/IconButton";
 import LineDivider from "../../components/ui/LineDivider";
-import { ArrowLeft, X, XCircle } from "@styled-icons/feather";
+import { LeftArrowAlt, X, XCircle } from "@styled-icons/boxicons-regular";
 import { Switch, useHistory, useParams } from "react-router-dom";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import ButtonItem from "../../components/navigation/items/ButtonItem";
@@ -65,7 +65,7 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
                     ) : (
                         <>
                             <IconButton onClick={() => switchPage()}>
-                                <ArrowLeft size={24} />
+                                <LeftArrowAlt size={24} />
                             </IconButton>
                             <Text
                                 id={`app.settings.${category}.${page}.title`}
diff --git a/src/pages/settings/ServerSettings.tsx b/src/pages/settings/ServerSettings.tsx
index c3946c7..ecf750c 100644
--- a/src/pages/settings/ServerSettings.tsx
+++ b/src/pages/settings/ServerSettings.tsx
@@ -3,7 +3,8 @@ import Category from "../../components/ui/Category";
 import { GenericSettings } from "./GenericSettings";
 import { useServer } from "../../context/revoltjs/hooks";
 import { Route, useHistory, useParams } from "react-router-dom";
-import { List, Share, Users, XSquare } from "@styled-icons/feather";
+import { ListUl, Share, Group } from "@styled-icons/boxicons-regular";
+import { XSquare } from "@styled-icons/boxicons-solid";
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
 
 import { Overview } from "./server/Overview";
@@ -31,22 +32,22 @@ export default function ServerSettings() {
                 {
                     category: <Category variant="uniform" text={server.name} />,
                     id: 'overview',
-                    icon: <List size={20} strokeWidth={2} />,
+                    icon: <ListUl size={20} />,
                     title: <Text id="app.settings.channel_pages.overview.title" />
                 },
                 {
                     id: 'members',
-                    icon: <Users size={20} strokeWidth={2} />,
+                    icon: <Group size={20} />,
                     title: "Members"
                 },
                 {
                     id: 'invites',
-                    icon: <Share size={20} strokeWidth={2} />,
+                    icon: <Share size={20} />,
                     title: "Invites"
                 },
                 {
                     id: 'bans',
-                    icon: <XSquare size={20} strokeWidth={2} />,
+                    icon: <XSquare size={20} />,
                     title: "Bans"
                 }
             ]}
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index 58be985..76e99e2 100644
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -10,16 +10,16 @@ import {
     Bell,
     Box,
     Coffee,
-    Gitlab,
     Globe,
     Image,
     LogOut,
-    RefreshCw,
+    Sync as SyncIcon,
     Shield,
     ToggleRight,
     User
-} from "@styled-icons/feather";
-import { Megaphone } from "@styled-icons/bootstrap";
+} from "@styled-icons/boxicons-regular";
+import { Megaphone } from "@styled-icons/boxicons-solid";
+import { Gitlab } from "@styled-icons/boxicons-logos";
 import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
 import LineDivider from "../../components/ui/LineDivider";
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
@@ -54,49 +54,49 @@ export default function Settings() {
                 {
                     category: <Text id="app.settings.categories.user_settings" />,
                     id: 'account',
-                    icon: <User size={20} strokeWidth={2} />,
+                    icon: <User size={20} />,
                     title: <Text id="app.settings.pages.account.title" />
                 },
                 {
                     id: 'profile',
-                    icon: <Image size={20} strokeWidth={2} />,
+                    icon: <Image size={20} />,
                     title: <Text id="app.settings.pages.profile.title" />
                 },
                 {
                     id: 'sessions',
-                    icon: <Shield size={20} strokeWidth={2} />,
+                    icon: <Shield size={20} />,
                     title: <Text id="app.settings.pages.sessions.title" />
                 },
                 {
                     category: <Text id="app.settings.categories.client_settings" />,
                     id: 'appearance',
-                    icon: <Box size={20} strokeWidth={2} />,
+                    icon: <Box size={20} />,
                     title: <Text id="app.settings.pages.appearance.title" />
                 },
                 {
                     id: 'notifications',
-                    icon: <Bell size={20} strokeWidth={2} />,
+                    icon: <Bell size={20} />,
                     title: <Text id="app.settings.pages.notifications.title" />
                 },
                 {
                     id: 'language',
-                    icon: <Globe size={20} strokeWidth={2} />,
+                    icon: <Globe size={20} />,
                     title: <Text id="app.settings.pages.language.title" />
                 },
                 {
                     id: 'sync',
-                    icon: <RefreshCw size={20} strokeWidth={2} />,
+                    icon: <SyncIcon size={20} />,
                     title: <Text id="app.settings.pages.sync.title" />
                 },
                 {
                     divider: true,
                     id: 'experiments',
-                    icon: <ToggleRight size={20} strokeWidth={2} />,
+                    icon: <ToggleRight size={20} />,
                     title: <Text id="app.settings.pages.experiments.title" />
                 },
                 {
                     id: 'feedback',
-                    icon: <Megaphone size={20} strokeWidth={0.3} />,
+                    icon: <Megaphone size={20} />,
                     title: <Text id="app.settings.pages.feedback.title" />
                 }
             ]}
@@ -122,13 +122,13 @@ export default function Settings() {
                     target="_blank"
                 >
                     <ButtonItem compact>
-                        <Gitlab size={20} strokeWidth={2} />
+                        <Gitlab size={20} />
                         <Text id="app.settings.pages.source_code" />
                     </ButtonItem>
                 </a>,
                 <a href="https://ko-fi.com/insertish" target="_blank">
                     <ButtonItem className={styles.donate} compact>
-                        <Coffee size={20} strokeWidth={2} />
+                        <Coffee size={20} />
                         <Text id="app.settings.pages.donate.title" />
                     </ButtonItem>
                 </a>,
@@ -138,7 +138,7 @@ export default function Settings() {
                     className={styles.logOut}
                     compact
                 >
-                    <LogOut size={20} strokeWidth={2} />
+                    <LogOut size={20} />
                     <Text id="app.settings.pages.logOut" />
                 </ButtonItem>,
                 <div className={styles.version}>
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index b3f7e61..1fc80c2 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -5,7 +5,7 @@ import Button from "../../../components/ui/Button";
 import { Users } from "revolt.js/dist/api/objects";
 import { Link, useHistory } from "react-router-dom";
 import Overline from "../../../components/ui/Overline";
-import { AtSign, Key, Mail } from "@styled-icons/feather";
+import { At, Key, Envelope } from "@styled-icons/boxicons-regular";
 import { useContext, useEffect, useState } from "preact/hooks";
 import UserIcon from "../../../components/common/user/UserIcon";
 import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
@@ -54,8 +54,8 @@ export function Account() {
             </div>
             <div className={styles.details}>
                 {[
-                    ["username", user.username, <AtSign size={24} />],
-                    ["email", email, <Mail size={24} />],
+                    ["username", user.username, <At size={24} />],
+                    ["email", email, <Envelope size={24} />],
                     ["password", "*****", <Key size={24} />]
                 ].map(([field, value, icon]) => (
                     <div>
diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx
index e0501d7..b9bccc4 100644
--- a/src/pages/settings/panes/Sessions.tsx
+++ b/src/pages/settings/panes/Sessions.tsx
@@ -9,7 +9,7 @@ import Preloader from "../../../components/ui/Preloader";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
-import { HelpCircle } from "@styled-icons/feather";
+import { HelpCircle } from "@styled-icons/boxicons-regular";
 import {
     Android,
     Firefoxbrowser,
diff --git a/src/pages/settings/server/Invites.tsx b/src/pages/settings/server/Invites.tsx
index 21e0337..1b37235 100644
--- a/src/pages/settings/server/Invites.tsx
+++ b/src/pages/settings/server/Invites.tsx
@@ -1,5 +1,5 @@
 import styles from './Panes.module.scss';
-import { XCircle } from "@styled-icons/feather";
+import { XCircle } from "@styled-icons/boxicons-regular";
 import { useEffect, useState } from "preact/hooks";
 import Preloader from "../../../components/ui/Preloader";
 import IconButton from "../../../components/ui/IconButton";
-- 
GitLab