Update: Changed icon pack to Boxicons

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;
     }
 

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 {

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}>

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>
         );

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";

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 && 

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>

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" />
                 }
             ]}

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`}

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"
                 }
             ]}

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}>

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>

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,

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";