diff --git a/.editorconfig b/.editorconfig
index 0dcc739fa..2322ac0d2 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -3,5 +3,5 @@ root = true
 [*.scss]
 indent_size = 2
 
-[login.scss]
+[{**/login.scss,**/tangerine/**/*.scss,**/gts/**/*.scss}]
 indent_size = 4
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d9a9a9db8..7bcb90502 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Preserve ‘mastodon-settings’ in localStorage (#66)
 - Redesigned the login page (#76)
+- Changed all icons with the Phosphor icon set (#77)
 
 ### Fixed
 
diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index bf09ec76c..8d182c5e8 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -123,7 +123,7 @@ class Account extends ImmutablePureComponent {
       if (requested) {
         buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
       } else if (blocking) {
-        buttons = <IconButton active icon='unlock' title={intl.formatMessage(messages.unblock, { name: account.get("username") })} onClick={this.handleBlock} />;
+        buttons = <IconButton active icon='lock-open-simple' title={intl.formatMessage(messages.unblock, { name: account.get("username") })} onClick={this.handleBlock} />;
       } else if (muting) {
         let hidingNotificationsButton;
         if (account.getIn(["relationship", "muting_notifications"])) {
@@ -133,16 +133,16 @@ class Account extends ImmutablePureComponent {
         }
         buttons = (
           <>
-            <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get("username") })} onClick={this.handleMute} />
+            <IconButton active icon='speaker-high' title={intl.formatMessage(messages.unmute, { name: account.get("username") })} onClick={this.handleMute} />
             {hidingNotificationsButton}
           </>
         );
       } else if (defaultAction === "mute") {
-        buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get("username") })} onClick={this.handleMute} />;
+        buttons = <IconButton icon='speaker-slash' title={intl.formatMessage(messages.mute, { name: account.get("username") })} onClick={this.handleMute} />;
       } else if (defaultAction === "block") {
-        buttons = <IconButton icon='lock' title={intl.formatMessage(messages.block, { name: account.get("username") })} onClick={this.handleBlock} />;
+        buttons = <IconButton icon='lock-simple' title={intl.formatMessage(messages.block, { name: account.get("username") })} onClick={this.handleBlock} />;
       } else if (!account.get("moved") || following) {
-        buttons = <IconButton icon={following ? "user-times" : "user-plus"} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
+        buttons = <IconButton icon={following ? "user-minus" : "user-plus"} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} className={following ? "destructive" : ""} active={following} />;
       }
     }
 
diff --git a/app/javascript/flavours/glitch/components/column_back_button.jsx b/app/javascript/flavours/glitch/components/column_back_button.jsx
index 92c98cfa2..28744c6a5 100644
--- a/app/javascript/flavours/glitch/components/column_back_button.jsx
+++ b/app/javascript/flavours/glitch/components/column_back_button.jsx
@@ -32,7 +32,7 @@ export default class ColumnBackButton extends PureComponent {
 
     const component = (
       <button onClick={this.handleClick} className='column-back-button'>
-        <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
+        <Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
       </button>
     );
diff --git a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx
index eaa08af53..f5219f28a 100644
--- a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx
+++ b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx
@@ -27,7 +27,7 @@ export default class ColumnBackButtonSlim extends PureComponent {
     return (
       <div className='column-back-button--slim'>
         <div role='button' tabIndex={0} onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
-          <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
+          <Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </div>
       </div>
diff --git a/app/javascript/flavours/glitch/components/column_header.jsx b/app/javascript/flavours/glitch/components/column_header.jsx
index 4254995c8..9ce770c19 100644
--- a/app/javascript/flavours/glitch/components/column_header.jsx
+++ b/app/javascript/flavours/glitch/components/column_header.jsx
@@ -7,6 +7,7 @@ import { FormattedMessage, injectIntl, defineMessages } from "react-intl";
 import classNames from "classnames";
 
 import { Icon } from "flavours/glitch/components/icon";
+import { IconButton } from "flavours/glitch/components/icon_button";
 
 const messages = defineMessages({
   show: { id: "column_header.show_settings", defaultMessage: "Show settings" },
@@ -117,34 +118,39 @@ class ColumnHeader extends PureComponent {
     }
 
     if (multiColumn && pinned) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
+      pinButton = (<IconButton key='pin-button' onClick={this.handlePin} className='column-header__footer-button' label='Unpin' icon='push-pin-slash' title={formatMessage({id: "column_header.unpin", defaultMessage: "Unpin"})} />);
 
       moveButtons = (
-        <div key='move-buttons' className='column-header__setting-arrows'>
-          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' /></button>
-          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button>
+        <div key='move-buttons' className='column-header__footer-arrows'>
+          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='column-header__footer-button' onClick={this.handleMoveLeft}><Icon id='caret-left' /></button>
+          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='column-header__footer-button' onClick={this.handleMoveRight}><Icon id='caret-right' /></button>
         </div>
       );
     } else if (multiColumn && this.props.onPin) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
+      pinButton = (<IconButton key='pin-button' onClick={this.handlePin} className='column-header__footer-button' label='Pin' icon='push-pin'  title={formatMessage({id: "column_header.pin", defaultMessage: "Pin"})} />);
     }
 
     if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) {
       backButton = (
         <button onClick={this.handleBackClick} className='column-header__back-button'>
-          <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
+          <Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </button>
       );
     }
+    
+    const columnHeaderFooter = (
+      <div className='column-header__footer'>
+        {pinButton} {moveButtons}
+      </div>
+    );
 
     const collapsedContent = [
       extraContent,
     ];
 
     if (multiColumn) {
-      collapsedContent.push(pinButton);
-      collapsedContent.push(moveButtons);
+      collapsedContent.push(columnHeaderFooter);
     }
 
     if (this.context.identity.signedIn && (children || (multiColumn && this.props.onPin))) {
@@ -155,10 +161,10 @@ class ColumnHeader extends PureComponent {
           aria-label={formatMessage(collapsed ? messages.show : messages.hide)}
           onClick={this.handleToggleClick}
         >
-          <i className='icon-with-badge'>
-            <Icon id='sliders' />
-            {collapseIssues && <i className='icon-with-badge__issue-badge' />}
-          </i>
+          <div className='gts-icon-with-badge'>
+            <Icon id='slider-horizontal' />
+            {collapseIssues && <i className='gts-icon-with-badge__issue-badge' />}
+          </div>
         </button>
       );
     }
diff --git a/app/javascript/flavours/glitch/components/dismissable_banner.tsx b/app/javascript/flavours/glitch/components/dismissable_banner.tsx
index 50ec411e2..d3871f375 100644
--- a/app/javascript/flavours/glitch/components/dismissable_banner.tsx
+++ b/app/javascript/flavours/glitch/components/dismissable_banner.tsx
@@ -35,7 +35,8 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
     <div className='dismissable-banner'>
       <div className='dismissable-banner__action'>
         <IconButton
-          icon='times'
+          icon='x'
+          className='dismissable-banner__action-button'
           title={intl.formatMessage(messages.dismiss)}
           onClick={handleDismiss}
         />
diff --git a/app/javascript/flavours/glitch/components/domain.tsx b/app/javascript/flavours/glitch/components/domain.tsx
index 624936438..d8b0045f5 100644
--- a/app/javascript/flavours/glitch/components/domain.tsx
+++ b/app/javascript/flavours/glitch/components/domain.tsx
@@ -34,7 +34,7 @@ export const Domain: React.FC<Props> = ({ domain, onUnblockDomain }) => {
         <div className='domain__buttons'>
           <IconButton
             active
-            icon='unlock'
+            icon='lock-simple-open'
             title={intl.formatMessage(messages.unblockDomain, { domain })}
             onClick={handleDomainUnblock}
           />
diff --git a/app/javascript/flavours/glitch/components/icon.tsx b/app/javascript/flavours/glitch/components/icon.tsx
index f51a13b20..7eb3de155 100644
--- a/app/javascript/flavours/glitch/components/icon.tsx
+++ b/app/javascript/flavours/glitch/components/icon.tsx
@@ -13,10 +13,11 @@ export const Icon: React.FC<Props> = ({
   id,
   className,
   fixedWidth,
+  title,
   ...other
 }) => (
-  <i
-    className={classNames("fa", `fa-${id}`, className, { "fa-fw": fixedWidth })}
-    {...other}
-  />
+  <svg className={classNames("gts-icon", className)} {...other}>
+    {title && <title>{title}</title>}
+    <use href={`/icons.svg#${id}`} />
+  </svg>
 );
diff --git a/app/javascript/flavours/glitch/components/icon_button.tsx b/app/javascript/flavours/glitch/components/icon_button.tsx
index 84ad5818e..99f897b86 100644
--- a/app/javascript/flavours/glitch/components/icon_button.tsx
+++ b/app/javascript/flavours/glitch/components/icon_button.tsx
@@ -82,24 +82,10 @@ export class IconButton extends React.PureComponent<Props, States> {
   };
 
   render() {
-    // Hack required for some icons which have an overriden size
-    let containerSize = "1.28571429em";
-    if (this.props.style?.fontSize) {
-      containerSize = `${this.props.size * 1.28571429}px`;
-    }
-
     const style = {
-      fontSize: `${this.props.size}px`,
-      height: containerSize,
-      lineHeight: `${this.props.size}px`,
       ...this.props.style,
       ...(this.props.active ? this.props.activeStyle : {}),
     };
-    if (!this.props.label) {
-      style.width = containerSize;
-    } else {
-      style.textAlign = "left";
-    }
 
     const {
       active,
diff --git a/app/javascript/flavours/glitch/components/icon_with_badge.tsx b/app/javascript/flavours/glitch/components/icon_with_badge.tsx
index 4696f76ab..ef328c3f2 100644
--- a/app/javascript/flavours/glitch/components/icon_with_badge.tsx
+++ b/app/javascript/flavours/glitch/components/icon_with_badge.tsx
@@ -16,11 +16,11 @@ export const IconWithBadge: React.FC<Props> = ({
   issueBadge,
   className,
 }) => (
-  <i className='icon-with-badge'>
+  <div className='gts-icon-with-badge'>
     <Icon id={id} fixedWidth className={className} />
     {count > 0 && (
-      <i className='icon-with-badge__badge'>{formatNumber(count)}</i>
+      <span className='gts-icon-with-badge__badge'>{formatNumber(count)}</span>
     )}
-    {issueBadge && <i className='icon-with-badge__issue-badge' />}
-  </i>
+    {issueBadge && <div className='gts-icon-with-badge__issue-badge' />}
+  </div>
 );
diff --git a/app/javascript/flavours/glitch/components/load_gap.tsx b/app/javascript/flavours/glitch/components/load_gap.tsx
index 054337ae9..8b10dbbc7 100644
--- a/app/javascript/flavours/glitch/components/load_gap.tsx
+++ b/app/javascript/flavours/glitch/components/load_gap.tsx
@@ -28,7 +28,7 @@ export const LoadGap: React.FC<Props> = ({ disabled, maxId, onClick }) => {
       onClick={handleClick}
       aria-label={intl.formatMessage(messages.load_more)}
     >
-      <Icon id='ellipsis-h' />
+      <Icon id='dots-three-filled' />
     </button>
   );
 };
diff --git a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
index 73c878de0..444c137a0 100644
--- a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
+++ b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
@@ -17,10 +17,10 @@ import ImmutablePureComponent from "react-immutable-pure-component";
 import { Icon } from "flavours/glitch/components/icon";
 
 const messages = defineMessages({
-  btnAll : { id: "notification_purge.btn_all", defaultMessage: "Select\nall" },
-  btnNone : { id: "notification_purge.btn_none", defaultMessage: "Select\nnone" },
-  btnInvert : { id: "notification_purge.btn_invert", defaultMessage: "Invert\nselection" },
-  btnApply : { id: "notification_purge.btn_apply", defaultMessage: "Clear\nselected" },
+  btnAll : { id: "notification_purge.btn_all", defaultMessage: "All" },
+  btnNone : { id: "notification_purge.btn_none", defaultMessage: "None" },
+  btnInvert : { id: "notification_purge.btn_invert", defaultMessage: "Invert" },
+  btnApply : { id: "notification_purge.btn_apply", defaultMessage: "Remove" },
 });
 
 class NotificationPurgeButtons extends ImmutablePureComponent {
@@ -35,25 +35,24 @@ class NotificationPurgeButtons extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, markNewForDelete } = this.props;
+    const { intl } = this.props;
 
-    //className='active'
     return (
       <div className='column-header__notif-cleaning-buttons'>
-        <button onClick={this.props.onMarkAll} className={classNames("column-header__button", { active: markNewForDelete })}>
-          <b>∀</b><br />{intl.formatMessage(messages.btnAll)}
+        <button onClick={this.props.onMarkAll} className={classNames("column-header__button")}>
+          {intl.formatMessage(messages.btnAll)}
         </button>
 
-        <button onClick={this.props.onMarkNone} className={classNames("column-header__button", { active: !markNewForDelete })}>
-          <b>∅</b><br />{intl.formatMessage(messages.btnNone)}
+        <button onClick={this.props.onMarkNone} className={classNames("column-header__button")}>
+          {intl.formatMessage(messages.btnNone)}
         </button>
 
         <button onClick={this.props.onInvert} className='column-header__button'>
-          <b>¬</b><br />{intl.formatMessage(messages.btnInvert)}
+          {intl.formatMessage(messages.btnInvert)}
         </button>
 
         <button onClick={this.props.onDeleteMarked} className='column-header__button'>
-          <Icon id='trash' /><br />{intl.formatMessage(messages.btnApply)}
+          {intl.formatMessage(messages.btnApply)}
         </button>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
index e03555c71..f153fca7b 100644
--- a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
+++ b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
@@ -22,7 +22,7 @@ class PictureInPicturePlaceholder extends PureComponent {
   render () {
     return (
       <div className='picture-in-picture-placeholder' role='button' tabIndex={0} onClick={this.handleClick}>
-        <Icon id='window-restore' />
+        <Icon id='browsers' />
         <FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' />
       </div>
     );
diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
index 019faa3a0..452403d3b 100644
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@@ -648,7 +648,7 @@ class Status extends ImmutablePureComponent {
 
     if (pictureInPicture.get("inUse")) {
       media.push(<PictureInPicturePlaceholder />);
-      mediaIcons.push("video-camera");
+      mediaIcons.push("film-strip");
     } else if (attachments.size > 0) {
       const language = status.getIn(["translation", "language"]) || status.get("language");
 
@@ -688,7 +688,7 @@ class Status extends ImmutablePureComponent {
             )}
           </Bundle>,
         );
-        mediaIcons.push("music");
+        mediaIcons.push("music-note");
       } else if (attachments.getIn([0, "type"]) === "video") {
         const attachment = status.getIn(["media_attachments", 0]);
         const description = attachment.getIn(["translation", "description"]) || attachment.get("description");
@@ -715,7 +715,7 @@ class Status extends ImmutablePureComponent {
             />)}
           </Bundle>,
         );
-        mediaIcons.push("video-camera");
+        mediaIcons.push("film-strip");
       } else {  //  Media type is 'image' or 'gifv'
         media.push(
           <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
@@ -737,7 +737,7 @@ class Status extends ImmutablePureComponent {
             )}
           </Bundle>,
         );
-        mediaIcons.push("picture-o");
+        mediaIcons.push("image");
       }
 
       if (!status.get("sensitive") && !(status.get("spoiler_text").length > 0) && settings.getIn(["collapsed", "backgrounds", "preview_images"])) {
@@ -759,7 +759,7 @@ class Status extends ImmutablePureComponent {
     if (status.get("poll")) {
       const language = status.getIn(["translation", "language"]) || status.get("language");
       contentMedia.push(<PollContainer pollId={status.get("poll")} lang={language} />);
-      contentMediaIcons.push("tasks");
+      contentMediaIcons.push("chart-bar-horizontal");
     }
 
     //  Here we prepare extra data-* attributes for CSS selectors.
@@ -819,17 +819,15 @@ class Status extends ImmutablePureComponent {
           {(connectReply || connectUp || connectToRoot) && <div className={classNames("status__line", { "status__line--full": connectReply, "status__line--first": !status.get("in_reply_to_id") && !connectToRoot })} />}
 
           <header className='status__info'>
-            <span>
-              {muted && prepend}
-              {!muted || !isCollapsed ? (
-                <StatusHeader
-                  status={status}
-                  friend={account}
-                  collapsed={isCollapsed}
-                  parseClick={parseClick}
-                />
-              ) : null}
-            </span>
+            {muted && prepend}
+            {!muted || !isCollapsed ? (
+              <StatusHeader
+                status={status}
+                friend={account}
+                collapsed={isCollapsed}
+                parseClick={parseClick}
+              />
+            ) : null}
             <StatusIcons
               status={status}
               mediaIcons={contentMediaIcons.concat(extraMediaIcons)}
diff --git a/app/javascript/flavours/glitch/components/status_action_bar.jsx b/app/javascript/flavours/glitch/components/status_action_bar.jsx
index 4faacc27a..62889990b 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.jsx
+++ b/app/javascript/flavours/glitch/components/status_action_bar.jsx
@@ -208,7 +208,6 @@ class StatusActionBar extends ImmutablePureComponent {
     const isRemote           = status.getIn(["account", "username"]) !== status.getIn(["account", "acct"]);
 
     let menu = [];
-    let reblogIcon = "retweet";
     let replyIcon;
     let replyTitle;
 
@@ -278,10 +277,10 @@ class StatusActionBar extends ImmutablePureComponent {
     }
 
     if (status.get("in_reply_to_id", null) === null) {
-      replyIcon = "reply";
+      replyIcon = "arrow-bend-up-left";
       replyTitle = intl.formatMessage(messages.reply);
     } else {
-      replyIcon = "reply-all";
+      replyIcon = "arrow-bend-double-up-left";
       replyTitle = intl.formatMessage(messages.replyAll);
     }
 
@@ -312,9 +311,9 @@ class StatusActionBar extends ImmutablePureComponent {
           counter={showReplyCount ? status.get("replies_count") : undefined}
           obfuscateCount
         />
-        <IconButton className={classNames("status__action-bar-button", { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get("reblogged")} title={reblogTitle} icon={reblogIcon} onClick={this.handleReblogClick} counter={withCounters ? status.get("reblogs_count") : undefined} />
-        <IconButton className='status__action-bar-button star-icon' animate active={status.get("favourited")} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get("favourites_count") : undefined} />
-        <IconButton className='status__action-bar-button bookmark-icon' disabled={!signedIn} active={status.get("bookmarked")} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
+        <IconButton className={classNames("status__action-bar-button status-boost", { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get("reblogged")} title={reblogTitle} icon={status.get("reblogged") ? "rocket-launch-filled" : "rocket-launch"} onClick={this.handleReblogClick} counter={withCounters ? status.get("reblogs_count") : undefined} />
+        <IconButton className='status__action-bar-button star-icon status-favourite' animate active={status.get("favourited")} title={intl.formatMessage(messages.favourite)} icon={status.get("favourited") ? "star-filled" : "star"} onClick={this.handleFavouriteClick} counter={withCounters ? status.get("favourites_count") : undefined} />
+        <IconButton className='status__action-bar-button bookmark-icon status-bookmark' disabled={!signedIn} active={status.get("bookmarked")} title={intl.formatMessage(messages.bookmark)} icon={status.get("bookmarked") ? "bookmark-filled" : "bookmark"} onClick={this.handleBookmarkClick} />
 
         {filterButton}
 
@@ -323,7 +322,7 @@ class StatusActionBar extends ImmutablePureComponent {
             scrollKey={scrollKey}
             status={status}
             items={menu}
-            icon='ellipsis-h'
+            icon='dots-three-outline'
             size={18}
             direction='right'
             ariaLabel={intl.formatMessage(messages.more)}
diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx
index e8277ed8e..f29ced63b 100644
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@@ -360,6 +360,7 @@ class StatusContent extends PureComponent {
             <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
             {" "}
             <button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
+              <Icon id={hidden ? "eye-closed" : "eye"} />
               {toggleText}
             </button>
           </p>
diff --git a/app/javascript/flavours/glitch/components/status_icons.jsx b/app/javascript/flavours/glitch/components/status_icons.jsx
index 0ca3864d1..77827b94a 100644
--- a/app/javascript/flavours/glitch/components/status_icons.jsx
+++ b/app/javascript/flavours/glitch/components/status_icons.jsx
@@ -114,7 +114,7 @@ class StatusIcons extends PureComponent {
           <Icon
             className='status__reply-icon'
             fixedWidth
-            id='comment'
+            id='arrow-bend-double-up-left'
             aria-hidden='true'
             title={intl.formatMessage(messages.inReplyTo)}
           />
@@ -122,7 +122,7 @@ class StatusIcons extends PureComponent {
         {settings.get("local_only") && status.get("local_only") &&
           <Icon
             fixedWidth
-            id='home'
+            id='house-line'
             aria-hidden='true'
             title={intl.formatMessage(messages.localOnly)}
           />}
@@ -138,7 +138,7 @@ class StatusIcons extends PureComponent {
                 intl.formatMessage(messages.uncollapse) :
                 intl.formatMessage(messages.collapse)
             }
-            icon='angle-double-up'
+            icon='caret-circle-double-up'
             onClick={this.handleCollapsedClick}
           />
         )}
diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx
index 22111b2a8..075ea1424 100644
--- a/app/javascript/flavours/glitch/components/status_prepend.jsx
+++ b/app/javascript/flavours/glitch/components/status_prepend.jsx
@@ -29,9 +29,9 @@ export default class StatusPrepend extends PureComponent {
       <a
         onClick={this.handleClick}
         href={account.get("url")}
-        className='status__display-name'
+        className='status__prepend-display-name'
       >
-        <b
+        <span
           dangerouslySetInnerHTML={{
             __html : account.get("display_name_html") || account.get("username"),
           }}
@@ -114,20 +114,20 @@ export default class StatusPrepend extends PureComponent {
         iconId = "star";
         break;
       case "featured":
-        iconId = "thumb-tack";
+        iconId = "push-pin";
         break;
       case "poll":
-        iconId = "tasks";
+        iconId = "chart-bar-horizontal";
         break;
       case "reblog":
       case "reblogged_by":
-        iconId = "retweet";
+        iconId = "rocket-launch";
         break;
       case "status":
         iconId = "bell";
         break;
       case "update":
-        iconId = "pencil";
+        iconId = "pencil-simple-line";
         break;
     }
 
diff --git a/app/javascript/flavours/glitch/components/status_visibility_icon.jsx b/app/javascript/flavours/glitch/components/status_visibility_icon.jsx
index e036b39c6..d37eb8184 100644
--- a/app/javascript/flavours/glitch/components/status_visibility_icon.jsx
+++ b/app/javascript/flavours/glitch/components/status_visibility_icon.jsx
@@ -26,10 +26,10 @@ class VisibilityIcon extends ImmutablePureComponent {
     const { withLabel, visibility, intl } = this.props;
 
     const visibilityIcon = {
-      public: "globe",
-      unlisted: "unlock",
-      private: "lock",
-      direct: "envelope",
+      public: "planet",
+      unlisted: "lock-open-simple",
+      private: "lock-simple",
+      direct: "at",
     }[visibility];
 
     const label = intl.formatMessage(messages[visibility]);
diff --git a/app/javascript/flavours/glitch/features/about/index.jsx b/app/javascript/flavours/glitch/features/about/index.jsx
index 548337136..aab1e3964 100644
--- a/app/javascript/flavours/glitch/features/about/index.jsx
+++ b/app/javascript/flavours/glitch/features/about/index.jsx
@@ -72,7 +72,7 @@ class Section extends PureComponent {
     return (
       <div className={classNames("about__section", { active: !collapsed })}>
         <div className='about__section__title' role='button' tabIndex={0} onClick={this.handleClick}>
-          <Icon id={collapsed ? "chevron-right" : "chevron-down"} fixedWidth /> {title}
+          <Icon id={collapsed ? "caret-right" : "caret-down"} fixedWidth /> {title}
         </div>
 
         {!collapsed && (
diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.jsx b/app/javascript/flavours/glitch/features/account/components/account_note.jsx
index f43421458..e0ce5b154 100644
--- a/app/javascript/flavours/glitch/features/account/components/account_note.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/account_note.jsx
@@ -57,7 +57,7 @@ class Header extends ImmutablePureComponent {
       action_buttons = (
         <div className='account__header__account-note__buttons'>
           <button className='icon-button' tabIndex={0} onClick={this.props.onCancelAccountNote} disabled={isSubmitting}>
-            <Icon id='times' size={15} /> <FormattedMessage id='account_note.cancel' defaultMessage='Cancel' />
+            <Icon id='x' size={15} /> <FormattedMessage id='account_note.cancel' defaultMessage='Cancel' />
           </button>
           <div className='flex-spacer' />
           <button className='icon-button' tabIndex={0} onClick={this.props.onSaveAccountNote} disabled={isSubmitting}>
@@ -69,7 +69,7 @@ class Header extends ImmutablePureComponent {
       action_buttons = (
         <div className='account__header__account-note__buttons'>
           <button className='icon-button' tabIndex={0} onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
-            <Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
+            <Icon id='pencil-simple-line' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
           </button>
         </div>
       );
diff --git a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
index cb81694e0..f92f45a57 100644
--- a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
@@ -28,7 +28,8 @@ class ActionBar extends PureComponent {
       return (
         <div>
           <div className='account__disclaimer'>
-            <Icon id='info-circle' fixedWidth /> <FormattedMessage
+            <Icon id='info' fixedWidth />
+            <FormattedMessage
               id='account.suspended_disclaimer_full'
               defaultMessage='This user has been suspended by a moderator.'
             />
@@ -42,7 +43,8 @@ class ActionBar extends PureComponent {
     if (account.get("acct") !== account.get("username")) {
       extraInfo = (
         <div className='account__disclaimer'>
-          <Icon id='info-circle' fixedWidth /> <FormattedMessage
+          <Icon id='info' fixedWidth />
+          <FormattedMessage
             id='account.disclaimer_full'
             defaultMessage="Information below may reflect the user's profile incompletely."
           />
diff --git a/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx b/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
index bfbd2515c..3c3503866 100644
--- a/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
@@ -27,7 +27,7 @@ export default class FollowRequestNote extends ImmutablePureComponent {
           </button>
 
           <button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
-            <Icon id='times' fixedWidth />
+            <Icon id='x' fixedWidth />
             <FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
           </button>
         </div>
diff --git a/app/javascript/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx
index 13bb4f71f..dd927f1f7 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/header.jsx
@@ -191,7 +191,7 @@ class Header extends ImmutablePureComponent {
     }
 
     if (account.getIn(["relationship", "requested"]) || account.getIn(["relationship", "following"])) {
-      bellBtn = <IconButton icon={account.getIn(["relationship", "notifying"]) ? "bell" : "bell-o"} size={24} active={account.getIn(["relationship", "notifying"])} title={intl.formatMessage(account.getIn(["relationship", "notifying"]) ? messages.disableNotifications : messages.enableNotifications, { name: account.get("username") })} onClick={this.props.onNotifyToggle} />;
+      bellBtn = <IconButton icon={account.getIn(["relationship", "notifying"]) ? "bell-ringing" : "bell"} size={24} active={account.getIn(["relationship", "notifying"])} title={intl.formatMessage(account.getIn(["relationship", "notifying"]) ? messages.disableNotifications : messages.enableNotifications, { name: account.get("username") })} onClick={this.props.onNotifyToggle} />;
     }
 
     if (me !== account.get("id")) {
@@ -217,7 +217,7 @@ class Header extends ImmutablePureComponent {
     }
 
     if (account.get("locked")) {
-      lockedIcon = <Icon id='lock' title={intl.formatMessage(messages.account_locked)} />;
+      lockedIcon = <Icon id='lock-simple' title={intl.formatMessage(messages.account_locked)} />;
     }
 
     if (signedIn && account.get("id") !== me && !suspended) {
@@ -360,7 +360,7 @@ class Header extends ImmutablePureComponent {
                   </>
                 )}
 
-                <DropdownMenuContainer disabled={menu.length === 0} items={menu} icon='ellipsis-v' size={24} direction='right' />
+                <DropdownMenuContainer disabled={menu.length === 0} items={menu} icon='dots-three-outline' size={24} direction='right' />
               </div>
             )}
           </div>
diff --git a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
index 52a89313a..556b54537 100644
--- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
+++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
@@ -85,7 +85,7 @@ export default class MediaItem extends ImmutablePureComponent {
         );
 
         if (attachment.get("type") === "audio") {
-          label = <Icon id='music' />;
+          label = <Icon id='music-note' />;
         } else {
           label = <Icon id='play' />;
         }
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
index 5aa2b3e9e..2839534ac 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
@@ -37,7 +37,7 @@ export default class MovedNote extends ImmutablePureComponent {
     return (
       <div className='account__moved-note'>
         <div className='account__moved-note__message'>
-          <div className='account__moved-note__icon-wrapper'><Icon id='suitcase' className='account__moved-note__icon' fixedWidth /></div>
+          <div className='account__moved-note__icon-wrapper'><Icon id='signpost' className='account__moved-note__icon' fixedWidth /></div>
           <FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/audio/index.jsx b/app/javascript/flavours/glitch/features/audio/index.jsx
index 37ba28ecb..ac43bd894 100644
--- a/app/javascript/flavours/glitch/features/audio/index.jsx
+++ b/app/javascript/flavours/glitch/features/audio/index.jsx
@@ -565,7 +565,7 @@ class Audio extends PureComponent {
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
               <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? "play" : "pause"} fixedWidth /></button>
-              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? "volume-off" : "volume-up"} fixedWidth /></button>
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth /></button>
 
               <div className={classNames("video-player__volume", { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
                 <div className='video-player__volume__current' style={{ width: `${muted ? 0 : volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@@ -587,7 +587,7 @@ class Audio extends PureComponent {
             <div className='video-player__buttons right'>
               {!editable && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
               <a title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)} className='video-player__download__icon player-button' href={this.props.src} download>
-                <Icon id={"download"} fixedWidth />
+                <Icon id={"file-arrow-down"} fixedWidth />
               </a>
             </div>
           </div>
diff --git a/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx b/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
index 72a9e3466..54d8c253b 100644
--- a/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
@@ -58,7 +58,7 @@ class ActionBar extends PureComponent {
     return (
       <div className='compose__action-bar'>
         <div className='compose__action-bar-dropdown'>
-          <DropdownMenuContainer items={menu} icon='ellipsis-v' size={18} direction='right' />
+          <DropdownMenuContainer items={menu} icon='dots-three-outline' size={18} direction='right' />
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
index 684e51497..e24970bbe 100644
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
@@ -205,10 +205,6 @@ export default class ComposerOptionsDropdown extends PureComponent {
             onKeyDown={this.handleButtonKeyDown}
             onKeyPress={this.handleKeyPress}
             size={18}
-            style={{
-              height: null,
-              lineHeight: "27px",
-            }}
             title={title}
           />
         </div>
diff --git a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
index 45154e7f9..eba98a870 100644
--- a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
@@ -10,6 +10,8 @@ import ImmutablePropTypes from "react-immutable-proptypes";
 import { supportsPassiveEvents } from "detect-passive-events";
 import Overlay from "react-overlays/Overlay";
 
+import { Icon } from "flavours/glitch/components/icon";
+
 import { useSystemEmojiFont } from "flavours/glitch/initial_state";
 import { assetHost } from "flavours/glitch/utils/config";
 
@@ -389,13 +391,14 @@ class EmojiPickerDropdown extends PureComponent {
 
     return (
       <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
-        <div ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
-          {button || <img
+        <button ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} onClick={this.onToggle} onKeyDown={this.onToggle}>
+          {button || <Icon 
+            fixedWidth
+            id='smiley'
+            aria-hidden='true'
             className={classNames("emojione", { "pulse-loading": active && loading })}
-            alt='🙂'
-            src={`${assetHost}/emoji/1f642.svg`}
           />}
-        </div>
+        </button>
 
         <Overlay show={active} placement={"bottom"} target={this.findTarget} popperConfig={{ strategy: "fixed" }}>
           {({ props, placement })=> (
diff --git a/app/javascript/flavours/glitch/features/compose/components/header.jsx b/app/javascript/flavours/glitch/features/compose/components/header.jsx
index d7834f290..0a44321c4 100644
--- a/app/javascript/flavours/glitch/features/compose/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/header.jsx
@@ -79,19 +79,22 @@ class Header extends ImmutablePureComponent {
           aria-label={intl.formatMessage(messages.start)}
           title={intl.formatMessage(messages.start)}
           to='/getting-started'
+          className='drawer__tab'
         ><Icon id='asterisk' /></Link>
         {renderForColumn("HOME", (
           <Link
             aria-label={intl.formatMessage(messages.home_timeline)}
             title={intl.formatMessage(messages.home_timeline)}
             to='/home'
-          ><Icon id='home' /></Link>
+            className='drawer__tab'
+          ><Icon id='house-line' /></Link>
         ))}
         {renderForColumn("NOTIFICATIONS", (
           <Link
             aria-label={intl.formatMessage(messages.notifications)}
             title={intl.formatMessage(messages.notifications)}
             to='/notifications'
+            className='drawer__tab'
           >
             <span className='icon-badge-wrapper'>
               <Icon id='bell' />
@@ -104,6 +107,7 @@ class Header extends ImmutablePureComponent {
             aria-label={intl.formatMessage(messages.community)}
             title={intl.formatMessage(messages.community)}
             to='/public/local'
+            className='drawer__tab'
           ><Icon id='users' /></Link>
         ))}
         {renderForColumn("PUBLIC", (
@@ -111,19 +115,22 @@ class Header extends ImmutablePureComponent {
             aria-label={intl.formatMessage(messages.public)}
             title={intl.formatMessage(messages.public)}
             to='/public'
-          ><Icon id='globe' /></Link>
+            className='drawer__tab'
+          ><Icon id='planet' /></Link>
         ))}
         <a
           aria-label={intl.formatMessage(messages.settings)}
           onClick={onSettingsClick}
           href='/settings/preferences'
           title={intl.formatMessage(messages.settings)}
-        ><Icon id='cogs' /></a>
+          className='drawer__tab'
+        ><Icon id='gear' /></a>
         <a
           aria-label={intl.formatMessage(messages.logout)}
           onClick={this.handleLogoutClick}
           href={signOutLink}
           title={intl.formatMessage(messages.logout)}
+          className='drawer__tab'
         ><Icon id='sign-out' /></a>
       </nav>
     );
diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx
index a310186cf..915c65778 100644
--- a/app/javascript/flavours/glitch/features/compose/components/options.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx
@@ -214,7 +214,7 @@ class ComposerOptions extends ImmutablePureComponent {
         text: formatMessage(messages.plain),
       },
       markdown: {
-        icon: "arrow-circle-down",
+        icon: "markdown-logo",
         name: "text/markdown",
         text: formatMessage(messages.markdown),
       },
@@ -238,7 +238,7 @@ class ComposerOptions extends ImmutablePureComponent {
           icon='paperclip'
           items={[
             {
-              icon: "cloud-upload",
+              icon: "file-arrow-up",
               name: "upload",
               text: formatMessage(messages.upload),
             },
@@ -255,7 +255,7 @@ class ComposerOptions extends ImmutablePureComponent {
           <IconButton
             active={hasPoll}
             disabled={disabled || !allowPoll}
-            icon='tasks'
+            icon='chart-bar-horizontal'
             inverted
             onClick={onTogglePoll}
             size={18}
@@ -293,7 +293,7 @@ class ComposerOptions extends ImmutablePureComponent {
         <LanguageDropdown />
         <DropdownContainer
           disabled={disabled || isEditing}
-          icon='ellipsis-h'
+          icon='dots-three-outline'
           items={advancedOptions ? [
             {
               meta: formatMessage(messages.local_only_long),
diff --git a/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx b/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
index 7a1be4a09..6b28f4928 100644
--- a/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
@@ -87,7 +87,7 @@ class OptionIntl extends PureComponent {
         </label>
 
         <div className='poll__cancel'>
-          <IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} />
+          <IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='x' onClick={this.handleOptionRemove} />
         </div>
       </li>
     );
diff --git a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx
index b55c3cfd9..11d758d75 100644
--- a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx
@@ -38,25 +38,25 @@ class PrivacyDropdown extends PureComponent {
     //  dropdown icon later.
     const privacyItems = {
       direct: {
-        icon: "envelope",
+        icon: "at",
         meta: formatMessage(messages.direct_long),
         name: "direct",
         text: formatMessage(messages.direct_short),
       },
       private: {
-        icon: "lock",
+        icon: "lock-simple",
         meta: formatMessage(messages.private_long),
         name: "private",
         text: formatMessage(messages.private_short),
       },
       public: {
-        icon: "globe",
+        icon: "planet",
         meta: formatMessage(messages.public_long),
         name: "public",
         text: formatMessage(messages.public_short),
       },
       unlisted: {
-        icon: "unlock",
+        icon: "lock-open-simple",
         meta: formatMessage(messages.unlisted_long),
         name: "unlisted",
         text: formatMessage(messages.unlisted_short),
diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.jsx b/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
index de583f21e..902f211a4 100644
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
@@ -54,7 +54,7 @@ class Publisher extends ImmutablePureComponent {
       over: diff < 0,
     });
 
-    const privacyIcons = { direct: "envelope", private: "lock", public: "globe", unlisted: "unlock" };
+    const privacyIcons = { direct: "at", private: "lock-simple", public: "planet", unlisted: "lock-open-simple" };
 
     let publishText;
     if (isEditing) {
diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
index b233c3a01..7eb1b7b38 100644
--- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
@@ -52,7 +52,7 @@ class ReplyIndicator extends ImmutablePureComponent {
         <header className='reply-indicator__header'>
           <IconButton
             className='reply-indicator__cancel'
-            icon='times'
+            icon='x'
             onClick={this.handleClick}
             title={intl.formatMessage(messages.cancel)}
             inverted
diff --git a/app/javascript/flavours/glitch/features/compose/components/search.jsx b/app/javascript/flavours/glitch/features/compose/components/search.jsx
index a17a41aaa..91d4569dc 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search.jsx
@@ -347,6 +347,7 @@ class Search extends PureComponent {
 
     return (
       <div className={classNames("search", { active: expanded })}>
+        <Icon id='magnifying-glass'  className='search__icon' />
         <input
           ref={this.setRef}
           className='search__input'
@@ -359,11 +360,9 @@ class Search extends PureComponent {
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
         />
-
-        <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
-          <Icon id='search' className={hasValue ? "" : "active"} />
-          <Icon id='times-circle' className={hasValue ? "active" : ""} />
-        </div>
+        <button type='button' className={hasValue ? "search__button active" : "search__button"} onClick={this.handleClear}>
+          <Icon id='x' />
+        </button>
         <div className='search__popout'>
           {options.length === 0 && (
             <>
@@ -373,7 +372,9 @@ class Search extends PureComponent {
                 {recent.size > 0 ? this._getOptions().map(({ label, action, forget }, i) => (
                   <button key={label} onMouseDown={action} className={classNames("search__popout__menu__item search__popout__menu__item--flex", { selected: selectedOption === i })}>
                     <span>{label}</span>
-                    <button className='icon-button' onMouseDown={forget}><Icon id='times' /></button>
+                    <button className='icon-button' onMouseDown={forget}>
+                      <Icon id='x' />
+                    </button>
                   </button>
                 )) : (
                   <div className='search__popout__menu__message'>
diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
index dd4a2a882..da6380e1b 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
@@ -52,7 +52,7 @@ class SearchResults extends ImmutablePureComponent {
 
     if (results.get("hashtags") && results.get("hashtags").size > 0) {
       hashtags = (
-        <SearchSection title={<><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
+        <SearchSection title={<><Icon id='tag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
           {withoutLastResult(results.get("hashtags")).map(hashtag => <Hashtag key={hashtag.get("name")} hashtag={hashtag} />)}
           {(results.get("hashtags").size > INITIAL_PAGE_LIMIT && results.get("hashtags").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreHashtags} />}
         </SearchSection>
@@ -61,7 +61,7 @@ class SearchResults extends ImmutablePureComponent {
 
     if (results.get("statuses") && results.get("statuses").size > 0) {
       statuses = (
-        <SearchSection title={<><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
+        <SearchSection title={<><Icon id='chat-circle-dots' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
           {withoutLastResult(results.get("statuses")).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
           {(results.get("statuses").size > INITIAL_PAGE_LIMIT && results.get("statuses").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreStatuses} />}
         </SearchSection>
@@ -71,7 +71,7 @@ class SearchResults extends ImmutablePureComponent {
     return (
       <div className='drawer--results'>
         <header className='search-results__header'>
-          <Icon id='search' fixedWidth />
+          <Icon id='magnifying-glass' fixedWidth />
           <FormattedMessage id='explore.search_results' defaultMessage='Search results' />
         </header>
 
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.jsx b/app/javascript/flavours/glitch/features/compose/components/upload.jsx
index 299e97aca..8d25590e1 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload.jsx
@@ -51,13 +51,13 @@ export default class Upload extends ImmutablePureComponent {
           {({ scale }) => (
             <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get("preview_url")})`, backgroundPosition: `${x}% ${y}%` }}>
               <div className='compose-form__upload__actions'>
-                <button type='button' className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
-                <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
+                <button type='button' className='icon-button' onClick={this.handleUndoClick}><Icon id='x' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
+                <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil-simple-line' /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
               </div>
 
               {(media.get("description") || "").length === 0 && (
                 <div className='compose-form__upload__warning'>
-                  <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info-circle' /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button>
+                  <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info' /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button>
                 </div>
               )}
             </div>
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx b/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
index 8ddfeb5da..bd9a60771 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
@@ -35,7 +35,7 @@ export default class UploadProgress extends PureComponent {
     return (
       <div className='upload-progress'>
         <div className='upload-progress__icon'>
-          <Icon id='upload' />
+          <Icon id='file-arrow-up' />
         </div>
 
         <div className='upload-progress__message'>
diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
index 7e2014cfe..bad4ee84a 100644
--- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
+++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
@@ -212,14 +212,14 @@ class Conversation extends ImmutablePureComponent {
             />
 
             <div className='status__action-bar'>
-              <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' onClick={this.handleReply} />
+              <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='arrow-bend-up-left' onClick={this.handleReply} />
 
               <div className='status__action-bar-dropdown'>
                 <DropdownMenuContainer
                   scrollKey={scrollKey}
                   status={lastStatus}
                   items={menu}
-                  icon='ellipsis-h'
+                  icon='dots-three-outline'
                   size={18}
                   direction='right'
                   title={intl.formatMessage(messages.more)}
diff --git a/app/javascript/flavours/glitch/features/direct_timeline/index.jsx b/app/javascript/flavours/glitch/features/direct_timeline/index.jsx
index 276ff8bfb..11b90f703 100644
--- a/app/javascript/flavours/glitch/features/direct_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/direct_timeline/index.jsx
@@ -138,7 +138,7 @@ class DirectTimeline extends PureComponent {
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
         <ColumnHeader
-          icon='envelope'
+          icon='at'
           active={hasUnread}
           title={intl.formatMessage(messages.title)}
           onPin={this.handlePin}
diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.jsx b/app/javascript/flavours/glitch/features/directory/components/account_card.jsx
index 6a51d69d4..eeecfe01e 100644
--- a/app/javascript/flavours/glitch/features/directory/components/account_card.jsx
+++ b/app/javascript/flavours/glitch/features/directory/components/account_card.jsx
@@ -187,7 +187,7 @@ class AccountCard extends ImmutablePureComponent {
       <div className='account-card'>
         <Permalink href={account.get("url")} to={`/@${account.get("acct")}`} className='account-card__permalink'>
           <div className='account-card__header'>
-            {this.props.onDismiss && <IconButton className='media-modal__close' title={intl.formatMessage(messages.dismissSuggestion)} icon='times' onClick={this.handleDismiss} size={20} />}
+            {this.props.onDismiss && <IconButton className='media-modal__close' title={intl.formatMessage(messages.dismissSuggestion)} icon='x' onClick={this.handleDismiss} size={20} />}
 
             <img
               src={
diff --git a/app/javascript/flavours/glitch/features/explore/results.jsx b/app/javascript/flavours/glitch/features/explore/results.jsx
index df954d06b..43f68b63e 100644
--- a/app/javascript/flavours/glitch/features/explore/results.jsx
+++ b/app/javascript/flavours/glitch/features/explore/results.jsx
@@ -171,13 +171,13 @@ class Results extends PureComponent {
             )}
 
             {hashtags.size > 0 && (
-              <SearchSection key='hashtags' title={<><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
+              <SearchSection key='hashtags' title={<><Icon id='tag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
                 {hashtags.take(INITIAL_DISPLAY).map(hashtag => <Hashtag key={hashtag.get("name")} hashtag={hashtag} />)}
               </SearchSection>
             )}
 
             {statuses.size > 0 && (
-              <SearchSection key='statuses' title={<><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
+              <SearchSection key='statuses' title={<><Icon id='chat-circle-dots' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
                 {statuses.take(INITIAL_DISPLAY).map(id => <Status key={id} id={id} />)}
               </SearchSection>
             )}
diff --git a/app/javascript/flavours/glitch/features/favourites/index.jsx b/app/javascript/flavours/glitch/features/favourites/index.jsx
index d7d597f1a..d8ddc70a0 100644
--- a/app/javascript/flavours/glitch/features/favourites/index.jsx
+++ b/app/javascript/flavours/glitch/features/favourites/index.jsx
@@ -86,7 +86,7 @@ class Favourites extends ImmutablePureComponent {
           showBackButton
           multiColumn={multiColumn}
           extraButton={(
-            <button className='column-header__button' title={intl.formatMessage(messages.refresh)} aria-label={intl.formatMessage(messages.refresh)} onClick={this.handleRefresh}><Icon id='refresh' /></button>
+            <button className='column-header__button' title={intl.formatMessage(messages.refresh)} aria-label={intl.formatMessage(messages.refresh)} onClick={this.handleRefresh}><Icon id='arrows-clockwise' /></button>
           )}
         />
         <ScrollableList
diff --git a/app/javascript/flavours/glitch/features/firehose/index.jsx b/app/javascript/flavours/glitch/features/firehose/index.jsx
index a16b1ec51..7d09f2e81 100644
--- a/app/javascript/flavours/glitch/features/firehose/index.jsx
+++ b/app/javascript/flavours/glitch/features/firehose/index.jsx
@@ -178,7 +178,7 @@ const Firehose = ({ feedType, multiColumn }) => {
   return (
     <Column bindToDocument={!multiColumn} ref={columnRef} label={intl.formatMessage(messages.title)}>
       <ColumnHeader
-        icon='globe'
+        icon='planet'
         active={hasUnread}
         title={intl.formatMessage(messages.title)}
         onPin={handlePin}
diff --git a/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx b/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx
index 4d7159157..fafee38c6 100644
--- a/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx
+++ b/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx
@@ -60,7 +60,7 @@ class Account extends ImmutablePureComponent {
     if (account.getIn(["relationship", "following"])) {
       button = <IconButton icon='check' title={intl.formatMessage(messages.unfollow)} active onClick={this.handleFollow} />;
     } else {
-      button = <IconButton icon='plus' title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} />;
+      button = <IconButton icon='user-plus' title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} />;
     }
 
     return (
diff --git a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
index fa654e49a..35375f6b4 100644
--- a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
+++ b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
@@ -41,7 +41,7 @@ class AccountAuthorize extends ImmutablePureComponent {
 
         <div className='account--panel'>
           <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
-          <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
+          <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} icon='x' onClick={onReject} /></div>
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx b/app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx
index ba3aeb7b6..7d21db3ce 100644
--- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx
+++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx
@@ -444,9 +444,9 @@ class Announcements extends ImmutablePureComponent {
 
           {announcements.size > 1 && (
             <div className='announcements__pagination'>
-              <IconButton disabled={announcements.size === 1} title={intl.formatMessage(messages.previous)} icon='chevron-left' onClick={this.handlePrevClick} size={13} />
+              <IconButton disabled={announcements.size === 1} title={intl.formatMessage(messages.previous)} icon='caret-left' onClick={this.handlePrevClick} size={13} />
               <span>{index + 1} / {announcements.size}</span>
-              <IconButton disabled={announcements.size === 1} title={intl.formatMessage(messages.next)} icon='chevron-right' onClick={this.handleNextClick} size={13} />
+              <IconButton disabled={announcements.size === 1} title={intl.formatMessage(messages.next)} icon='caret-right' onClick={this.handleNextClick} size={13} />
             </div>
           )}
         </div>
diff --git a/app/javascript/flavours/glitch/features/getting_started/index.jsx b/app/javascript/flavours/glitch/features/getting_started/index.jsx
index e0a132d08..c9a9663f2 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.jsx
+++ b/app/javascript/flavours/glitch/features/getting_started/index.jsx
@@ -141,7 +141,7 @@ class GettingStarted extends ImmutablePureComponent {
       }
 
       if (!columns.find(item => item.get("id") === "PUBLIC")) {
-        navItems.push(<ColumnLink key='public_timeline' icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/public' />);
+        navItems.push(<ColumnLink key='public_timeline' icon='planet' text={intl.formatMessage(messages.public_timeline)} to='/public' />);
       }
     }
 
@@ -151,24 +151,24 @@ class GettingStarted extends ImmutablePureComponent {
 
     if (signedIn) {
       if (!multiColumn || !columns.find(item => item.get("id") === "DIRECT")) {
-        navItems.push(<ColumnLink key='conversations' icon='envelope' text={intl.formatMessage(messages.direct)} to='/conversations' />);
+        navItems.push(<ColumnLink key='conversations' icon='at' text={intl.formatMessage(messages.direct)} to='/conversations' />);
       }
 
       if (!multiColumn || !columns.find(item => item.get("id") === "BOOKMARKS")) {
-        navItems.push(<ColumnLink key='bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />);
+        navItems.push(<ColumnLink key='bookmarks' icon='bookmarks' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />);
       }
 
       if (myAccount.get("locked") || unreadFollowRequests > 0) {
         navItems.push(<ColumnLink key='follow_requests' icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
       }
 
-      navItems.push(<ColumnLink key='getting_started' icon='ellipsis-h' text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />);
+      navItems.push(<ColumnLink key='getting_started' icon='dots-three-outline' text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />);
 
       listItems = listItems.concat([
         <div key='9'>
-          <ColumnLink key='lists' icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' />
+          <ColumnLink key='lists' icon='list' text={intl.formatMessage(messages.lists)} to='/lists' />
           {lists.filter(list => !columns.find(item => item.get("id") === "LIST" && item.getIn(["params", "id"]) === list.get("id"))).map(list =>
-            <ColumnLink key={`list-${list.get("id")}`} to={`/lists/${list.get("id")}`} icon='list-ul' text={list.get("title")} />,
+            <ColumnLink key={`list-${list.get("id")}`} to={`/lists/${list.get("id")}`} icon='dot' text={list.get("title")} />,
           )}
         </div>,
       ]);
@@ -187,7 +187,7 @@ class GettingStarted extends ImmutablePureComponent {
                 {listItems}
                 <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
                 { preferencesLink !== undefined && <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href={preferencesLink} /> }
-                <ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={openSettings} />
+                <ColumnLink icon='gear' text={intl.formatMessage(messages.settings)} onClick={openSettings} />
               </>
             )}
           </div>
diff --git a/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx b/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx
index 8a7beff97..902245b3b 100644
--- a/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx
+++ b/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx
@@ -60,13 +60,13 @@ class GettingStartedMisc extends ImmutablePureComponent {
         <div className='scrollable'>
           <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
           {signedIn && (<ColumnLink key='favourites' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />)}
-          {signedIn && (<ColumnLink key='pinned' icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' />)}
+          {signedIn && (<ColumnLink key='pinned' icon='push-pin' text={intl.formatMessage(messages.pins)} to='/pinned' />)}
           {signedIn && (<ColumnLink key='featured_users' icon='users' text={intl.formatMessage(messages.featured_users)} onClick={this.openFeaturedAccountsModal} />)}
-          {signedIn && (<ColumnLink key='mutes' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' />)}
-          {signedIn && (<ColumnLink key='blocks' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />)}
-          {signedIn && (<ColumnLink key='domain_blocks' icon='minus-circle' text={intl.formatMessage(messages.domain_blocks)} to='/domain_blocks' />)}
-          <ColumnLink key='shortcuts' icon='question' text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' />
-          {signedIn && (<ColumnLink key='onboarding' icon='hand-o-right' text={intl.formatMessage(messages.show_me_around)} onClick={this.openOnboardingModal} />)}
+          {signedIn && (<ColumnLink key='mutes' icon='bell-slash' text={intl.formatMessage(messages.mutes)} to='/mutes' />)}
+          {signedIn && (<ColumnLink key='blocks' icon='prohibit' text={intl.formatMessage(messages.blocks)} to='/blocks' />)}
+          {signedIn && (<ColumnLink key='domain_blocks' icon='network-slash' text={intl.formatMessage(messages.domain_blocks)} to='/domain_blocks' />)}
+          <ColumnLink key='shortcuts' icon='keyboard' text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' />
+          {signedIn && (<ColumnLink key='onboarding' icon='signpost' text={intl.formatMessage(messages.show_me_around)} onClick={this.openOnboardingModal} />)}
         </div>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.jsx b/app/javascript/flavours/glitch/features/home_timeline/index.jsx
index d0ff970ee..eb5241702 100644
--- a/app/javascript/flavours/glitch/features/home_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/index.jsx
@@ -181,7 +181,7 @@ class HomeTimeline extends PureComponent {
           aria-label={intl.formatMessage(showAnnouncements ? messages.hide_announcements : messages.show_announcements)}
           onClick={this.handleToggleAnnouncementsClick}
         >
-          <IconWithBadge id='bullhorn' count={unreadAnnouncements} />
+          <IconWithBadge id='megaphone-simple' count={unreadAnnouncements} />
         </button>
       );
     }
@@ -193,7 +193,7 @@ class HomeTimeline extends PureComponent {
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} name='home' label={intl.formatMessage(messages.title)}>
         <ColumnHeader
-          icon='home'
+          icon='house-line'
           active={hasUnread}
           title={intl.formatMessage(messages.title)}
           onPin={this.handlePin}
diff --git a/app/javascript/flavours/glitch/features/interaction_modal/index.jsx b/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
index 07a69eb84..08a38a84b 100644
--- a/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
+++ b/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
@@ -354,12 +354,12 @@ class InteractionModal extends React.PureComponent {
 
     switch(type) {
       case "reply":
-        icon = <Icon id='reply' />;
+        icon = <Icon id='arrow-bend-up-left' />;
         title = <FormattedMessage id='interaction_modal.title.reply' defaultMessage="Reply to {name}'s post" values={{ name }} />;
         actionDescription = <FormattedMessage id='interaction_modal.description.reply' defaultMessage='With an account on Mastodon, you can respond to this post.' />;
         break;
       case "reblog":
-        icon = <Icon id='retweet' />;
+        icon = <Icon id='rocket-launch' />;
         title = <FormattedMessage id='interaction_modal.title.reblog' defaultMessage="Boost {name}'s post" values={{ name }} />;
         actionDescription = <FormattedMessage id='interaction_modal.description.reblog' defaultMessage='With an account on Mastodon, you can boost this post to share it with your own followers.' />;
         break;
diff --git a/app/javascript/flavours/glitch/features/list_adder/components/list.jsx b/app/javascript/flavours/glitch/features/list_adder/components/list.jsx
index d61ee0538..d7b8baa8c 100644
--- a/app/javascript/flavours/glitch/features/list_adder/components/list.jsx
+++ b/app/javascript/flavours/glitch/features/list_adder/components/list.jsx
@@ -46,7 +46,7 @@ class List extends ImmutablePureComponent {
     let button;
 
     if (added) {
-      button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+      button = <IconButton icon='x' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
     } else {
       button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
     }
@@ -55,7 +55,7 @@ class List extends ImmutablePureComponent {
       <div className='list'>
         <div className='list__wrapper'>
           <div className='list__display-name'>
-            <Icon id='list-ul' className='column-link__icon' fixedWidth />
+            <Icon id='dot' className='column-link__icon' fixedWidth />
             {list.get("title")}
           </div>
 
diff --git a/app/javascript/flavours/glitch/features/list_editor/components/account.jsx b/app/javascript/flavours/glitch/features/list_editor/components/account.jsx
index 0eaa4b452..404334266 100644
--- a/app/javascript/flavours/glitch/features/list_editor/components/account.jsx
+++ b/app/javascript/flavours/glitch/features/list_editor/components/account.jsx
@@ -35,7 +35,7 @@ export default class Account extends ImmutablePureComponent {
     let button;
 
     if (added) {
-      button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+      button = <IconButton icon='x' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
     } else {
       button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
     }
diff --git a/app/javascript/flavours/glitch/features/list_editor/components/search.jsx b/app/javascript/flavours/glitch/features/list_editor/components/search.jsx
index 092d6956f..2b2b5c6cb 100644
--- a/app/javascript/flavours/glitch/features/list_editor/components/search.jsx
+++ b/app/javascript/flavours/glitch/features/list_editor/components/search.jsx
@@ -55,8 +55,8 @@ export default class Search extends PureComponent {
         </label>
 
         <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
-          <Icon id='search' className={classNames({ active: !hasValue })} />
-          <Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
+          <Icon id='magnifying-glass' className={classNames({ active: !hasValue })} />
+          <Icon id='x' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.jsx b/app/javascript/flavours/glitch/features/list_timeline/index.jsx
index 54533b1a8..f525a9d53 100644
--- a/app/javascript/flavours/glitch/features/list_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/list_timeline/index.jsx
@@ -181,7 +181,7 @@ class ListTimeline extends PureComponent {
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={title}>
         <ColumnHeader
-          icon='list-ul'
+          icon='dot'
           active={hasUnread}
           title={title}
           onPin={this.handlePin}
@@ -190,13 +190,15 @@ class ListTimeline extends PureComponent {
           pinned={pinned}
           multiColumn={multiColumn}
         >
-          <div className='column-settings__row column-header__links'>
+          <div className='column-settings__row column-header__links column-header__button-row'>
             <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditClick}>
-              <Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
+              <Icon id='pencil-simple-line' />
+              <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
             </button>
 
             <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleDeleteClick}>
-              <Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
+              <Icon id='trash' />
+              <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
             </button>
           </div>
 
diff --git a/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx b/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx
index 7e8f1c3d3..14d0b0da3 100644
--- a/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx
+++ b/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx
@@ -68,7 +68,7 @@ class NewListForm extends PureComponent {
 
         <IconButton
           disabled={disabled || !value}
-          icon='plus'
+          icon='list-plus'
           title={title}
           onClick={this.handleClick}
         />
diff --git a/app/javascript/flavours/glitch/features/lists/index.jsx b/app/javascript/flavours/glitch/features/lists/index.jsx
index 622f2044a..1d8bad390 100644
--- a/app/javascript/flavours/glitch/features/lists/index.jsx
+++ b/app/javascript/flavours/glitch/features/lists/index.jsx
@@ -64,7 +64,7 @@ class Lists extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
 
     return (
-      <Column bindToDocument={!multiColumn} icon='bars' heading={intl.formatMessage(messages.heading)}>
+      <Column bindToDocument={!multiColumn} icon='list' heading={intl.formatMessage(messages.heading)}>
         <ColumnBackButtonSlim />
 
         <NewListForm />
@@ -76,7 +76,7 @@ class Lists extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {lists.map(list =>
-            <ColumnLink key={list.get("id")} to={`/lists/${list.get("id")}`} icon='list-ul' text={list.get("title")} />,
+            <ColumnLink key={list.get("id")} to={`/lists/${list.get("id")}`} icon='dot' text={list.get("title")} />,
           )}
         </ScrollableList>
 
diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx b/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx
index 33aa0fda9..2ac0e4a3c 100644
--- a/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx
@@ -37,28 +37,28 @@ class LocalSettingsNavigation extends PureComponent {
           active={index === 0}
           index={0}
           onNavigate={onNavigate}
-          icon='cogs'
+          icon='gear'
           title={intl.formatMessage(messages.general)}
         />
         <LocalSettingsNavigationItem
           active={index === 1}
           index={1}
           onNavigate={onNavigate}
-          icon='pencil'
+          icon='pencil-simple-line'
           title={intl.formatMessage(messages.compose)}
         />
         <LocalSettingsNavigationItem
           active={index === 2}
           index={2}
           onNavigate={onNavigate}
-          textIcon='CW'
+          icon='warning'
           title={intl.formatMessage(messages.content_warnings)}
         />
         <LocalSettingsNavigationItem
           active={index === 3}
           index={3}
           onNavigate={onNavigate}
-          icon='angle-double-up'
+          icon='caret-circle-double-up'
           title={intl.formatMessage(messages.collapsed)}
         />
         <LocalSettingsNavigationItem
@@ -73,7 +73,7 @@ class LocalSettingsNavigation extends PureComponent {
           className='close'
           index={5}
           onNavigate={onClose}
-          icon='times'
+          icon='x'
           title={intl.formatMessage(messages.close)}
         />
       </nav>
diff --git a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
index 8e3bd4429..3d95a3cb2 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
@@ -66,42 +66,42 @@ class FilterBar extends PureComponent {
           onClick={this.onClick("mention")}
           title={intl.formatMessage(tooltips.mentions)}
         >
-          <Icon id='reply-all' fixedWidth />
+          <Icon id={selectedFilter === "mention" ? "arrow-bend-double-up-left-filled" : "arrow-bend-double-up-left"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "favourite" ? "active" : ""}
           onClick={this.onClick("favourite")}
           title={intl.formatMessage(tooltips.favourites)}
         >
-          <Icon id='star' fixedWidth />
+          <Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "reblog" ? "active" : ""}
           onClick={this.onClick("reblog")}
           title={intl.formatMessage(tooltips.boosts)}
         >
-          <Icon id='retweet' fixedWidth />
+          <Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "poll" ? "active" : ""}
           onClick={this.onClick("poll")}
           title={intl.formatMessage(tooltips.polls)}
         >
-          <Icon id='tasks' fixedWidth />
+          <Icon id={selectedFilter === "poll" ? "chart-bar-horizontal-filled" : "chart-bar-horizontal"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "status" ? "active" : ""}
           onClick={this.onClick("status")}
           title={intl.formatMessage(tooltips.statuses)}
         >
-          <Icon id='home' fixedWidth />
+          <Icon id={selectedFilter === "status" ? "chat-circle-dots-filled" : "chat-circle-dots"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "follow" ? "active" : ""}
           onClick={this.onClick("follow")}
           title={intl.formatMessage(tooltips.follows)}
         >
-          <Icon id='user-plus' fixedWidth />
+          <Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} fixedWidth />
         </button>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
index 67b87416c..95ce8c227 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
@@ -122,7 +122,7 @@ class FollowRequest extends ImmutablePureComponent {
 
               <div className='account__relationship'>
                 <IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} />
-                <IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} />
+                <IconButton title={intl.formatMessage(messages.reject)} icon='x' onClick={onReject} />
               </div>
             </div>
           </div>
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx
index e83fb1bb0..f006f3c26 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx
@@ -38,11 +38,11 @@ class NotificationsPermissionBanner extends PureComponent {
     return (
       <div className='notifications-permission-banner'>
         <div className='notifications-permission-banner__close'>
-          <IconButton icon='times' onClick={this.handleClose} title={intl.formatMessage(messages.close)} />
+          <IconButton icon='x' onClick={this.handleClose} title={intl.formatMessage(messages.close)} />
         </div>
 
         <h2><FormattedMessage id='notifications_permission_banner.title' defaultMessage='Never miss a thing' /></h2>
-        <p><FormattedMessage id='notifications_permission_banner.how_to_control' defaultMessage="To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled." values={{ icon: <Icon id='sliders' /> }} /></p>
+        <p><FormattedMessage id='notifications_permission_banner.how_to_control' defaultMessage="To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled." values={{ icon: <Icon id='sliders-horizontal' /> }} /></p>
         <Button onClick={this.handleClick}><FormattedMessage id='notifications_permission_banner.enable' defaultMessage='Enable desktop notifications' /></Button>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/features/notifications/index.jsx b/app/javascript/flavours/glitch/features/notifications/index.jsx
index 043e4b48f..40c45e2b2 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/index.jsx
@@ -297,7 +297,7 @@ class Notifications extends PureComponent {
           onClick={this.handleMarkAsRead}
           className='column-header__button'
         >
-          <Icon id='check' />
+          <Icon id='checks' />
         </button>,
       );
     }
diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
index 36373c6a0..e137ca558 100644
--- a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
+++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
@@ -175,10 +175,10 @@ class Footer extends ImmutablePureComponent {
     let replyIcon, replyTitle;
 
     if (status.get("in_reply_to_id", null) === null) {
-      replyIcon = "reply";
+      replyIcon = "arrow-bend-up-left";
       replyTitle = intl.formatMessage(messages.reply);
     } else {
-      replyIcon = "reply-all";
+      replyIcon = "arrow-bend-double-up-left";
       replyTitle = intl.formatMessage(messages.replyAll);
     }
 
@@ -220,9 +220,9 @@ class Footer extends ImmutablePureComponent {
     return (
       <div className='picture-in-picture__footer'>
         {replyButton}
-        <IconButton className={classNames("status__action-bar-button", { reblogPrivate })} disabled={!publicStatus && !reblogPrivate}  active={status.get("reblogged")} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={status.get("reblogs_count")} />
+        <IconButton className={classNames("status__action-bar-button", { reblogPrivate })} disabled={!publicStatus && !reblogPrivate}  active={status.get("reblogged")} title={reblogTitle} icon='rocket-launch' onClick={this.handleReblogClick} counter={status.get("reblogs_count")} />
         <IconButton className='status__action-bar-button star-icon' animate active={status.get("favourited")} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get("favourites_count")} />
-        {withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='external-link' onClick={this.handleOpenClick} href={status.get("url")} />}
+        {withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='arrow-square-out' onClick={this.handleOpenClick} href={status.get("url")} />}
       </div>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx
index 985c2c451..c921b52de 100644
--- a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx
@@ -42,7 +42,7 @@ class Header extends ImmutablePureComponent {
           <DisplayName account={account} />
         </Link>
 
-        <IconButton icon='times' onClick={onClose} title={intl.formatMessage(messages.close)} />
+        <IconButton icon='x' onClick={onClose} title={intl.formatMessage(messages.close)} />
       </div>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/pinned_statuses/index.jsx b/app/javascript/flavours/glitch/features/pinned_statuses/index.jsx
index 162c69a49..097acf9a2 100644
--- a/app/javascript/flavours/glitch/features/pinned_statuses/index.jsx
+++ b/app/javascript/flavours/glitch/features/pinned_statuses/index.jsx
@@ -50,7 +50,7 @@ class PinnedStatuses extends ImmutablePureComponent {
     const { intl, statusIds, hasMore, multiColumn } = this.props;
 
     return (
-      <Column bindToDocument={!multiColumn} icon='thumb-tack' heading={intl.formatMessage(messages.heading)} ref={this.setRef}>
+      <Column bindToDocument={!multiColumn} icon='push-pin' heading={intl.formatMessage(messages.heading)} ref={this.setRef}>
         <ColumnBackButtonSlim />
         <StatusList
           statusIds={statusIds}
diff --git a/app/javascript/flavours/glitch/features/public_timeline/index.jsx b/app/javascript/flavours/glitch/features/public_timeline/index.jsx
index 1d9ce49ed..c4ed77ec7 100644
--- a/app/javascript/flavours/glitch/features/public_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/public_timeline/index.jsx
@@ -135,7 +135,7 @@ class PublicTimeline extends PureComponent {
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} name='federated' label={intl.formatMessage(messages.title)}>
         <ColumnHeader
-          icon='globe'
+          icon='planet'
           active={hasUnread}
           title={intl.formatMessage(messages.title)}
           onPin={this.handlePin}
diff --git a/app/javascript/flavours/glitch/features/reblogs/index.jsx b/app/javascript/flavours/glitch/features/reblogs/index.jsx
index ee3f8ceb6..fc1274aa1 100644
--- a/app/javascript/flavours/glitch/features/reblogs/index.jsx
+++ b/app/javascript/flavours/glitch/features/reblogs/index.jsx
@@ -79,13 +79,13 @@ class Reblogs extends ImmutablePureComponent {
     return (
       <Column ref={this.setRef}>
         <ColumnHeader
-          icon='retweet'
+          icon='rocket-launch'
           title={intl.formatMessage(messages.heading)}
           onClick={this.handleHeaderClick}
           showBackButton
           multiColumn={multiColumn}
           extraButton={(
-            <button className='column-header__button' title={intl.formatMessage(messages.refresh)} aria-label={intl.formatMessage(messages.refresh)} onClick={this.handleRefresh}><Icon id='refresh' /></button>
+            <button className='column-header__button' title={intl.formatMessage(messages.refresh)} aria-label={intl.formatMessage(messages.refresh)} onClick={this.handleRefresh}><Icon id='arrows-clockwise' /></button>
           )}
         />
 
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
index 5aa5bf154..1544a5a5d 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
@@ -219,14 +219,22 @@ class ActionBar extends PureComponent {
     }
 
     return (
-      <div className='detailed-status__action-bar'>
-        <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get("in_reply_to_id", null) === null ? "reply" : "reply-all"} onClick={this.handleReplyClick} /></div>
-        <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get("reblogged")} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
-        <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get("favourited")} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
-        <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get("bookmarked")} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
+      <div className='status__action-bar detailed-status__action-bar'>
+        <div className='detailed-status__button'>
+          <IconButton title={intl.formatMessage(messages.reply)} icon={status.get("in_reply_to_id", null) === null ? "arrow-bend-up-left" : "arrow-bend-double-up-left"} onClick={this.handleReplyClick} />
+        </div>
+        <div className='detailed-status__button'>
+          <IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get("reblogged")} title={reblogTitle} icon={status.get("reblogged") ? "rocket-launch-filled" : "rocket-launch"} onClick={this.handleReblogClick} />
+        </div>
+        <div className='detailed-status__button'>
+          <IconButton className='star-icon' animate active={status.get("favourited")} title={intl.formatMessage(messages.favourite)} icon={status.get("favourited") ? "star-filled" : "star"} onClick={this.handleFavouriteClick} />
+        </div>
+        <div className='detailed-status__button'>
+          <IconButton className='bookmark-icon' disabled={!signedIn} active={status.get("bookmarked")} title={intl.formatMessage(messages.bookmark)} icon={status.get("bookmarked") ? "bookmark-filled" : "bookmark"} onClick={this.handleBookmarkClick} />
+        </div>
 
         <div className='detailed-status__action-bar-dropdown'>
-          <DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title={intl.formatMessage(messages.more)} />
+          <DropdownMenuContainer size={18} icon='dots-three-outline' items={menu} direction='left' title={intl.formatMessage(messages.more)} />
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/features/status/components/card.jsx b/app/javascript/flavours/glitch/features/status/components/card.jsx
index 01b403301..1d362d70b 100644
--- a/app/javascript/flavours/glitch/features/status/components/card.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/card.jsx
@@ -213,7 +213,7 @@ export default class Card extends PureComponent {
               <div className='status-card__actions'>
                 <div>
                   <button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
-                  {horizontal && <a href={card.get("url")} target='_blank' rel='noopener noreferrer'><Icon id='external-link' /></a>}
+                  {horizontal && <a href={card.get("url")} target='_blank' rel='noopener noreferrer'><Icon id='arrow-square-out' /></a>}
                 </div>
               </div>
             )}
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
index 2ff645b59..894adf562 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
@@ -135,7 +135,7 @@ class DetailedStatus extends ImmutablePureComponent {
 
     let applicationLink = "";
     let reblogLink = "";
-    let reblogIcon = "retweet";
+    let reblogIcon = "rocket-launch";
     let favouriteLink = "";
     let edited = "";
 
@@ -255,9 +255,9 @@ class DetailedStatus extends ImmutablePureComponent {
     const visibilityLink = <> · <VisibilityIcon visibility={status.get("visibility")} /></>;
 
     if (status.get("visibility") === "direct") {
-      reblogIcon = "envelope";
+      reblogIcon = "at";
     } else if (status.get("visibility") === "private") {
-      reblogIcon = "lock";
+      reblogIcon = "lock-simple";
     }
 
     if (!["unlisted", "public"].includes(status.get("visibility"))) {
diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx
index 403f9a386..7a84a05a7 100644
--- a/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@@ -721,7 +721,7 @@ class Status extends ImmutablePureComponent {
     return (
       <Column bindToDocument={!multiColumn} ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}>
         <ColumnHeader
-          icon='comment'
+          icon='chat-circle-text'
           title={intl.formatMessage(messages.tootHeading)}
           onClick={this.handleHeaderClick}
           showBackButton
diff --git a/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx b/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx
index 6ffc6affe..5f73b0980 100644
--- a/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx
+++ b/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx
@@ -101,7 +101,7 @@ class SubscribedLanguagesModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-dialog-modal'>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={20} />
           <FormattedMessage id='subscribed_languages.target' defaultMessage='Change subscribed languages for {target}' values={{ target: <strong>{acct}</strong> }} />
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx
index 6d8818aba..abf305a98 100644
--- a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx
@@ -117,7 +117,7 @@ class BoostModal extends ImmutablePureComponent {
             { missingMediaDescription ?
               <FormattedMessage id='boost_modal.missing_description' defaultMessage='This toot contains some media without description' />
               :
-              <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} />
+              <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='rocket-launch' /></span> }} />
             }
           </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx b/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx
index 293018229..3a125f51e 100644
--- a/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx
@@ -31,7 +31,7 @@ class BundleModalError extends Component {
     return (
       <div className='modal-root__modal error-modal'>
         <div className='error-modal__body'>
-          <IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
+          <IconButton title={formatMessage(messages.retry)} icon='arrows-clockwise' onClick={this.handleRetry} size={64} />
           {formatMessage(messages.error)}
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
index d860c9b7d..ee4e4e3e3 100644
--- a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
@@ -65,7 +65,7 @@ class CompareHistoryModal extends PureComponent {
     return (
       <div className='modal-root__modal compare-history-modal'>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' icon='x' onClick={onClose} size={20} />
           {label}
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx
index 6e43690bb..fcf74a3fe 100644
--- a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx
@@ -51,12 +51,12 @@ class DeprecatedSettingsModal extends PureComponent {
             values={{
               app_settings: (
                 <strong className='deprecated-settings-label'>
-                  <Icon id='cogs' /> <FormattedMessage id='navigation_bar.app_settings' defaultMessage='App settings' />
+                  <Icon id='gear' /> <FormattedMessage id='navigation_bar.app_settings' defaultMessage='App settings' />
                 </strong>
               ),
               preferences: (
                 <strong className='deprecated-settings-label'>
-                  <Icon id='cog' /> <FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' />
+                  <Icon id='gear' /> <FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' />
                 </strong>
               ),
             }}
diff --git a/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx
index 886f3b795..ee8fe8b28 100644
--- a/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx
@@ -596,9 +596,9 @@ class DoodleModal extends ImmutablePureComponent {
             </div>
           </div>
           <div className='doodle-toolbar'>
-            <IconButton icon='pencil' title='Draw' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === "draw"} inverted />
-            <IconButton icon='bath' title='Fill' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === "fill"} inverted />
-            <IconButton icon='undo' title='Undo' label='Undo' onClick={this.undo} size={18} inverted />
+            <IconButton icon='pencil-simple-line' title='Draw' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === "draw"} inverted />
+            <IconButton icon='paint-bucket' title='Fill' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === "fill"} inverted />
+            <IconButton icon='arrow-counter-clockwise' title='Undo' label='Undo' onClick={this.undo} size={18} inverted />
             <IconButton icon='trash' title='Clear' label='Clear' onClick={this.handleClearBtn} size={18} inverted />
           </div>
           <div className='doodle-palette'>
diff --git a/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx
index 7f9fea6d3..bb1f86024 100644
--- a/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx
@@ -62,7 +62,7 @@ class EmbedModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-modal embed-modal'>
         <div className='report-modal__target'>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={16} />
           <FormattedMessage id='status.embed' defaultMessage='Embed' />
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx
index 94cbca085..dc3a50a29 100644
--- a/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx
@@ -120,7 +120,7 @@ class FilterModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-dialog-modal'>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={20} />
           <FormattedMessage id='filter_modal.title.status' defaultMessage='Filter a post' />
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
index 595887de0..dacaf3150 100644
--- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
@@ -311,7 +311,7 @@ class FocalPointModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-modal' style={{ maxWidth: 960 }}>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={20} />
           <FormattedMessage id='upload_modal.edit_media' defaultMessage='Edit media' />
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/header.jsx b/app/javascript/flavours/glitch/features/ui/components/header.jsx
index 9a20ed8b6..159b109d7 100644
--- a/app/javascript/flavours/glitch/features/ui/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/header.jsx
@@ -68,7 +68,7 @@ class Header extends PureComponent {
     if (signedIn) {
       content = (
         <>
-          {location.pathname !== "/search" && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' /></Link>}
+          {location.pathname !== "/search" && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='magnifying-glass' /></Link>}
           {location.pathname !== "/publish" && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
           <Account />
         </>
diff --git a/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx
index d4c3b8f56..d6594f3b1 100644
--- a/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx
@@ -53,7 +53,7 @@ class ImageModal extends PureComponent {
         </div>
 
         <div className={navigationClassName}>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={40} />
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx
index fd148cd54..eae24db83 100644
--- a/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx
@@ -47,7 +47,7 @@ class ListPanel extends ImmutablePureComponent {
         <hr />
 
         {lists.map(list => (
-          <ColumnLink icon='list-ul' key={list.get("id")} strict text={list.get("title")} to={`/lists/${list.get("id")}`} transparent />
+          <ColumnLink icon='dot' key={list.get("id")} strict text={list.get("title")} to={`/lists/${list.get("id")}`} transparent />
         ))}
       </div>
     );
diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
index 85bf70f18..05a1b70ce 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
@@ -141,8 +141,8 @@ class MediaModal extends ImmutablePureComponent {
 
     const index = this.getIndex();
 
-    const leftNav  = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' fixedWidth /></button>;
-    const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' fixedWidth /></button>;
+    const leftNav  = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='caret-left' fixedWidth /></button>;
+    const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='caret-right' fixedWidth /></button>;
 
     const content = media.map((image) => {
       const width  = image.getIn(["meta", "original", "width"]) || null;
@@ -244,7 +244,7 @@ class MediaModal extends ImmutablePureComponent {
         </div>
 
         <div className={navigationClassName}>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={40} />
 
           {leftNav}
           {rightNav}
diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
index b676bc684..2b854a17b 100644
--- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
@@ -71,7 +71,7 @@ class NavigationPanel extends Component {
 
         {signedIn && (
           <>
-            <ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />
+            <ColumnLink transparent to='/home' icon='house-line' text={intl.formatMessage(messages.home)} />
             <ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
             <FollowRequestsColumnLink />
           </>
@@ -80,11 +80,11 @@ class NavigationPanel extends Component {
         {trendsEnabled ? (
           <ColumnLink transparent to='/explore' icon='hashtag' text={intl.formatMessage(messages.explore)} />
         ) : (
-          <ColumnLink transparent to='/search' icon='search' text={intl.formatMessage(messages.search)} />
+          <ColumnLink transparent to='/search' icon='magnifying-glass' text={intl.formatMessage(messages.search)} />
         )}
 
         {(signedIn || timelinePreview) && (
-          <ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
+          <ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='planet' text={intl.formatMessage(messages.firehose)} />
         )}
 
         {!signedIn && (
@@ -97,15 +97,15 @@ class NavigationPanel extends Component {
         {signedIn && (
           <>
             <ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} />
-            <ColumnLink transparent to='/bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} />
+            <ColumnLink transparent to='/bookmarks' icon='bookmarks' text={intl.formatMessage(messages.bookmarks)} />
             <ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} />
-            <ColumnLink transparent to='/lists' icon='list-ul' text={intl.formatMessage(messages.lists)} />
+            <ColumnLink transparent to='/lists' icon='list' text={intl.formatMessage(messages.lists)} />
 
             <ListPanel />
 
             <hr />
 
-            <ColumnLink transparent onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} />
+            <ColumnLink transparent onClick={onOpenSettings} icon='gear' text={intl.formatMessage(messages.app_settings)} />
             <ColumnLink transparent onClick={onLogout} icon='sign-out' text={intl.formatMessage(messages.logout)} />
           </>
         )}
diff --git a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx
index 8e234d7e2..a54183d7b 100644
--- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx
@@ -117,7 +117,7 @@ const PageFour = ({ domain, intl }) => (
         </div>
 
         <div>
-          <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='globe' type={intl.formatMessage(messages.federated_title)} /></div>
+          <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='planet' type={intl.formatMessage(messages.federated_title)} /></div>
         </div>
       </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx
index 0fa9ced6b..bcbd9c4e9 100644
--- a/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx
@@ -211,7 +211,7 @@ class ReportModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-dialog-modal'>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={20} />
           <FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get("acct")}</strong> }} />
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
index a26ba4e21..c341041c0 100644
--- a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
@@ -420,12 +420,14 @@ class ZoomableImage extends PureComponent {
     const zoomButtonShouldHide = this.state.navigationHidden || this.props.zoomButtonHidden || this.state.zoomMatrix.rate <= MIN_SCALE ? "media-modal__zoom-button--hidden" : "";
     const zoomButtonTitle = this.state.zoomState === "compress" ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand);
 
+    const zoomButtonIcon = this.state.zoomState === "compress" ? "arrows-in-simple" : "arrows-out-simple";
+
     return (
       <>
         <IconButton
           className={`media-modal__zoom-button ${zoomButtonShouldHide}`}
           title={zoomButtonTitle}
-          icon={this.state.zoomState}
+          icon={zoomButtonIcon}
           onClick={this.handleZoomClick}
           size={40}
           style={{
diff --git a/app/javascript/flavours/glitch/features/video/index.jsx b/app/javascript/flavours/glitch/features/video/index.jsx
index 09fb1f85b..667967e35 100644
--- a/app/javascript/flavours/glitch/features/video/index.jsx
+++ b/app/javascript/flavours/glitch/features/video/index.jsx
@@ -639,8 +639,13 @@ class Video extends PureComponent {
 
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
-              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={autoFocus}><Icon id={paused ? "play" : "pause"} fixedWidth /></button>
-              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? "volume-off" : "volume-up"} fixedWidth /></button>
+              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={autoFocus}>
+                <Icon id={paused ? "play" : "pause"} fixedWidth />
+              </button>
+              
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}>
+                <Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth />
+              </button>
 
               <div className={classNames("video-player__volume", { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
                 <div className='video-player__volume__current' style={{ width: `${muted ? 0 : volume * 100}%` }} />
@@ -662,10 +667,10 @@ class Video extends PureComponent {
             </div>
 
             <div className='video-player__buttons right'>
-              {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
-              {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>}
-              {onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>}
-              <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? "compress" : "arrows-alt"} fixedWidth /></button>
+              {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash-filled' fixedWidth /></button>}
+              {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='arrows-out-simple' fixedWidth /></button>}
+              {onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='arrows-in-simple' fixedWidth /></button>}
+              <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? "arrows-in-simple" : "frame-corners"} fixedWidth /></button>
             </div>
           </div>
         </div>
diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
index 6643cd1aa..f0c1d3fc5 100644
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ b/app/javascript/flavours/glitch/styles/_mixins.scss
@@ -43,8 +43,8 @@
 
 @mixin fullwidth-gallery {
   &.full-width {
-    margin-left: -14px;
-    margin-right: -14px;
+    margin-left: -10px;
+    margin-right: -10px;
     width: inherit;
     max-width: none;
     border-radius: 0;
@@ -52,17 +52,14 @@
 }
 
 @mixin search-input() {
-  outline: 0;
-  box-sizing: border-box;
   width: 100%;
-  border: 0;
-  box-shadow: none;
+  border: 1px solid var(--color-search-lines);
+  border-radius: var(--drawer-border-radius);
+  box-sizing: border-box;
+  color: var(--color-search-fg);
   font-family: inherit;
-  background: $ui-base-color;
-  color: $darker-text-color;
-  border-radius: 4px;
-  font-size: 14px;
-  margin: 0;
+  font-size: inherit;
+  background: var(--color-search-bg);
 }
 
 @mixin search-popout() {
diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss
index 68f4f8f1e..5c75bcc1a 100644
--- a/app/javascript/flavours/glitch/styles/accessibility.scss
+++ b/app/javascript/flavours/glitch/styles/accessibility.scss
@@ -15,23 +15,6 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
   }
 }
 
-// Display a checkmark on active UI elements otherwise differing only by color
-.status__action-bar-button,
-.detailed-status__button .icon-button {
-  position: relative;
-
-  &.active::after {
-    position: absolute;
-    content: '\F00C';
-    font-size: 50%;
-    inset-inline-end: -0.55em;
-    top: -0.44em;
-
-    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- this is an icon font, this can't use a generic font */
-    font-family: FontAwesome;
-  }
-}
-
 .hicolor-privacy-icons {
   .status__visibility-icon.fa-globe,
   .privacy-dropdown__option .fa-globe {
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index ff00c797c..34abaa0f8 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -8,15 +8,15 @@
 
 body {
   font-family: $font-sans-serif, sans-serif;
-  background: darken($ui-base-color, 7%);
+  background: var(--color-bg);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;
-  color: $primary-text-color;
+  color: var(--color-fg);
   text-rendering: optimizelegibility;
   font-feature-settings: 'kern';
   text-size-adjust: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
 
   &.system-font {
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index e68c6cac0..215fef775 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -147,6 +147,20 @@
   height: 18px;
   padding: 10px;
   white-space: nowrap;
+
+  button.icon-button {
+    padding: 6px;
+  }
+
+  button.destructive:hover {
+    color: var(--color-button-fg-destructive);
+  }
+
+  .gts-icon {
+    --size: 20px;
+
+    display: block;
+  }
 }
 
 .account__header__wrapper {
@@ -179,6 +193,13 @@
       text-decoration: none;
     }
   }
+
+  .gts-icon {
+    --size: 16px;
+
+    margin-inline-end: 5px;
+    vertical-align: text-bottom;
+  }
 }
 
 .account__action-bar {
@@ -301,12 +322,13 @@
 }
 
 .account--panel {
+  display: flex;
+  gap: 5px;
   background: lighten($ui-base-color, 4%);
   border-top: 1px solid lighten($ui-base-color, 8%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);
-  display: flex;
   flex-direction: row;
-  padding: 10px 0;
+  padding: 5px;
 }
 
 .account--panel__button,
@@ -315,6 +337,43 @@
   text-align: center;
 }
 
+.account--panel__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  button {
+    width: 100%;
+    padding: 6px;
+  }
+
+  &:first-child button {
+    color: var(--color-success-fg);
+    background: var(--color-success-bg);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-success-bg);
+      background: var(--color-success-fg);
+    }
+  }
+
+  &:last-child button {
+    color: var(--color-destructive-fg);
+    background: var(--color-destructive-bg);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-destructive-bg);
+      background: var(--color-destructive-fg);
+    }
+  }
+
+  svg.gts-icon {
+    --size: 20px;
+  }
+}
+
 .relationship-tag {
   color: $white;
   margin-bottom: 4px;
@@ -358,63 +417,64 @@
 
 .notification__filter-bar,
 .account__section-headline {
-  background: darken($ui-base-color, 4%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-  cursor: default;
   display: flex;
-  flex-shrink: 0;
+  gap: 8px;
+  padding: 6px;
+  border: 1px solid var(--color-notifications-lines);
+  cursor: default;
+  background: var(--color-notifications-bg);
 
+  a,
   button {
-    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    padding: 8px 6px;
+    min-width: 32px;
     border: 0;
-    margin: 0;
+    border-radius: var(--button-border-radius);
+    color: var(--color-notifications-fg);
+    line-height: 20px;
+    text-decoration: none;
+    background: transparent;
+    transition: all 0.3s;
+
+    &:focus-visible,
+    &:hover {
+      background: var(--color-notifications-bg--hover);
+    }
   }
 
-  button,
-  a {
-    display: block;
-    flex: 1 1 auto;
-    color: $darker-text-color;
-    padding: 15px 0;
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
-    text-decoration: none;
+  a.active,
+  button.active {
+    background: var(--color-notifications-bg--active);
+
+    &:focus-visible,
+    &:hover {
+      background: var(--color-notifications-bg--hover);
+    }
+  }
+
+  a:not(:first-child),
+  button:not(:first-child) {
     position: relative;
 
-    &.active {
-      color: $primary-text-color;
-
-      &::before {
-        display: block;
-        content: '';
-        position: absolute;
-        bottom: -1px;
-        left: 0;
-        width: 100%;
-        height: 3px;
-        border-radius: 4px;
-        background: $highlight-text-color;
-      }
+    &::before {
+      position: absolute;
+      top: 6px;
+      right: calc(100% + 3px);
+      width: 2px;
+      height: 24px;
+      background: var(--color-notifications-lines);
+      content: '';
     }
   }
 
-  &.directory__section-headline {
-    background: darken($ui-base-color, 2%);
-    border-bottom-color: transparent;
+  svg.gts-icon {
+    --size: 20px;
 
-    a,
-    button {
-      &.active {
-        &::before {
-          display: none;
-        }
-
-        &::after {
-          border-color: transparent transparent darken($ui-base-color, 7%);
-        }
-      }
-    }
+    display: block;
   }
 }
 
@@ -553,7 +613,7 @@
     &__buttons {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 5px;
       padding-top: 55px;
       overflow: hidden;
 
@@ -567,10 +627,17 @@
       }
 
       .icon-button {
-        border: 1px solid lighten($ui-base-color, 12%);
-        border-radius: 4px;
-        box-sizing: content-box;
-        padding: 2px;
+        padding: 6px;
+        border: 1px solid var(--color-accent-lines);
+        border-radius: var(--button-border-radius);
+        color: var(--color-accent-fg);
+        background: var(--color-accent-bg);
+      }
+
+      .gts-icon {
+        --size: 24px;
+
+        display: block;
       }
     }
 
@@ -596,7 +663,9 @@
         text-overflow: ellipsis;
 
         small {
-          display: block;
+          display: flex;
+          gap: 5px;
+          align-items: center;
           font-size: 14px;
           color: $darker-text-color;
           font-weight: 400;
@@ -798,7 +867,18 @@
 }
 
 .follow-request-banner .button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  justify-content: center;
   width: 100%;
+
+  svg.gts-icon {
+    --size: 20px;
+
+    width: var(--size);
+    height: var(--size);
+  }
 }
 
 .account-memorial-banner__message {
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 126c68c41..f6393416d 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -187,28 +187,6 @@ $ui-header-height: 55px;
   }
 }
 
-.column-header__back-button {
-  background: lighten($ui-base-color, 4%);
-  border: 0;
-  font-family: inherit;
-  color: $highlight-text-color;
-  cursor: pointer;
-  flex: 0 0 auto;
-  font-size: 16px;
-  padding: 0;
-  padding-inline-end: 5px;
-  z-index: 3;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:last-child {
-    padding: 0;
-    padding-inline-end: 15px;
-  }
-}
-
 .column-back-button__icon {
   display: inline-block;
   margin-inline-end: 5px;
@@ -343,44 +321,108 @@ $ui-header-height: 55px;
 
 .column-header {
   display: flex;
+  border: 1px solid var(--color-lines);
+  border-bottom: 0;
+  border-radius: var(--drawer-border-radius) var(--drawer-border-radius) 0 0;
+  color: $darker-text-color;
   font-size: 16px;
+  font-weight: 700;
   background: lighten($ui-base-color, 4%);
-  border-radius: 4px 4px 0 0;
-  flex: 0 0 auto;
-  cursor: pointer;
-  position: relative;
-  z-index: 2;
-  outline: 0;
-  overflow: hidden;
+}
 
-  & > button {
-    margin: 0;
-    border: 0;
-    padding: 15px;
-    color: inherit;
-    background: transparent;
-    font: inherit;
-    text-align: start;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    flex: 1;
+.column-header > button,
+.column-header__button,
+.column-header__back-button,
+.column-header__footer-button,
+.column-header__setting-btn {
+  display: flex;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  background: transparent;
+  transition: all 0.3s;
+
+  .gts-icon {
+    --size: 24px;
+
+    display: block;
   }
+}
 
-  & > .column-header__back-button {
-    color: $highlight-text-color;
-  }
+.column-header > button {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  flex-grow: 1;
+  padding: 12px 0 13px 15px;
+}
 
+.column-header__buttons {
+  display: flex;
+  gap: 5px;
+  padding: 4px 5px 5px;
+}
+
+.column-header__button,
+.column-header__back-button {
+  gap: 5px;
+  align-items: center;
+  padding: 8px;
+  border-radius: var(--button-border-radius);
+  text-decoration: none;
+
+  &:focus-visible,
+  &:hover,
   &.active {
-    .column-header__icon {
-      color: $highlight-text-color;
-      text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
-    }
+    background: darken($ui-base-color, 4%);
   }
 
-  &:focus,
   &:active {
-    outline: 0;
+    transform: scale(0.9);
+  }
+}
+
+.column-header__back-button {
+  color: $highlight-text-color;
+}
+
+.column-header__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--size-layout-gap);
+}
+
+.column-header__footer-arrows {
+  display: flex;
+  gap: 5px;
+
+  .rtl & {
+    flex-direction: row-reverse;
+  }
+}
+
+.column-header__footer-button,
+.column-header__setting-btn {
+  gap: 5px;
+  align-items: center;
+  padding: 6px;
+  border-radius: var(--button-border-radius);
+  color: inherit;
+
+  .gts-icon {
+    --size: 20px;
+  }
+
+  &:focus-visible,
+  &:hover,
+  &.active {
+    color: inherit;
+    background: darken($ui-base-color, 4%);
+  }
+
+  &:active {
+    transform: scale(0.9);
   }
 }
 
@@ -399,18 +441,13 @@ $ui-header-height: 55px;
   }
 
   > .scrollable {
+    border: 1px solid var(--color-lines);
+    border-top: 0;
+    border-radius: 0 0 var(--drawer-border-radius) var(--drawer-border-radius);
     background: $ui-base-color;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
   }
 }
 
-.column-header__buttons {
-  height: 48px;
-  display: flex;
-  margin-inline-start: 0;
-}
-
 .column-header__links {
   margin-bottom: 14px;
 }
@@ -419,54 +456,17 @@ $ui-header-height: 55px;
   margin-inline-end: 10px;
 }
 
-.column-header__button {
-  background: lighten($ui-base-color, 4%);
-  border: 0;
-  color: $darker-text-color;
-  cursor: pointer;
-  font-size: 16px;
-  padding: 0 15px;
-
-  &:hover {
-    color: lighten($darker-text-color, 7%);
-  }
-
-  &.active {
-    color: $primary-text-color;
-    background: lighten($ui-base-color, 8%);
-
-    &:hover {
-      color: $primary-text-color;
-      background: lighten($ui-base-color, 8%);
-    }
-  }
-
-  // glitch - added focus ring for keyboard navigation
-  &:focus {
-    text-shadow: 0 0 4px darken($ui-highlight-color, 5%);
-  }
-
-  &:disabled {
-    color: $dark-text-color;
-    cursor: default;
-  }
-}
-
 .column-header__notif-cleaning-buttons {
   display: flex;
-  align-items: stretch;
-  justify-content: space-around;
+  gap: 5px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 5px;
+}
 
-  .column-header__button {
-    background: transparent;
-    text-align: center;
-    padding: 10px 5px;
-    font-size: 14px;
-  }
-
-  b {
-    font-weight: bold;
-  }
+.column-header__notif-cleaning-buttons .column-header__button {
+  padding: 5px;
 }
 
 .layout-single-column .column-header__notif-cleaning-buttons {
@@ -544,6 +544,11 @@ $ui-header-height: 55px;
   }
 }
 
+.column-header__button-row {
+  display: flex;
+  gap: 5px;
+}
+
 .column-header__collapsible__extra + .column-header__setting-btn {
   padding-top: 5px;
 }
@@ -753,6 +758,11 @@ $ui-header-height: 55px;
   .icon-button {
     flex: 0 0 auto;
     margin: 0 5px;
+    padding: 6px;
+  }
+
+  .gts-icon {
+    --size: 20px;
   }
 }
 
@@ -1045,11 +1055,21 @@ $ui-header-height: 55px;
 
   &__action {
     float: right;
-    padding: 15px 10px;
 
     .icon-button {
       color: $highlight-text-color;
     }
+
+    .dismissable-banner__action-button {
+      margin: 5px;
+      padding: 6px;
+    }
+
+    .gts-icon {
+      --size: 20px;
+
+      display: block;
+    }
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
index 3b85dfbf1..e2c3157e5 100644
--- a/app/javascript/flavours/glitch/styles/components/compose_form.scss
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -416,6 +416,16 @@
       transparent
     );
   }
+
+  button.icon-button {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  svg.gts-icon {
+    display: block;
+  }
 }
 
 .compose-form__upload__actions {
@@ -479,48 +489,44 @@
 }
 
 .compose-form__buttons-wrapper {
-  padding: 10px;
-  background: darken($simple-background-color, 8%);
-  border-radius: 0 0 4px 4px;
-  height: 27px;
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  flex: 0 0 auto;
+  padding: 10px;
+  border-radius: 0 0 4px 4px;
+  color: $action-button-color;
+  background: darken($simple-background-color, 8%);
 }
 
 .compose-form__buttons {
   display: flex;
-  flex: 0 0 auto;
+  gap: 1px;
+  align-items: center;
+  justify-content: center;
 
-  & .icon-button,
-  & .text-icon-button {
-    display: inline-block;
-    box-sizing: content-box;
-    padding: 0 3px;
-    height: 27px;
-    line-height: 27px;
-    vertical-align: bottom;
+  .icon-button,
+  .text-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  svg.gts-icon {
+    --size: 20px;
+
+    scale: 1.2;
   }
 
   & > hr {
-    display: inline-block;
-    margin: 0 3px;
-    border-width: 0 0 0 1px;
-    border-style: none none none solid;
-    border-color: transparent transparent transparent
-      darken($simple-background-color, 24%);
-    padding: 0;
-    width: 0;
-    height: 27px;
-    background: transparent;
+    margin: 0 1px;
+    height: 24px;
+    border: 0;
+    border-right: 1px solid $action-button-color;
   }
 }
 
-.character-counter__wrapper {
-  align-self: center;
-  margin-inline-end: 4px;
-}
-
 .privacy-dropdown.active {
   .privacy-dropdown__value {
     background: $simple-background-color;
@@ -565,6 +571,10 @@
   color: $inverted-text-color;
   cursor: pointer;
 
+  svg.gts-icon {
+    --size: 24px;
+  }
+
   .privacy-dropdown__option__content {
     flex: 1 1 auto;
     color: $lighter-text-color;
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index c1e207535..b4f8dbbcb 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -1,11 +1,12 @@
 .drawer {
+  display: flex;
+  gap: var(--size-layout-gap);
+  flex: none;
+  flex-direction: column;
+  padding: 10px 5px;
   width: 300px;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   overflow-y: hidden;
-  padding: 10px 5px;
-  flex: none;
 
   &:first-child {
     padding-inline-start: 10px;
@@ -50,43 +51,61 @@
 }
 
 .drawer__header {
-  flex: none;
-  font-size: 16px;
-  background: lighten($ui-base-color, 8%);
-  margin-bottom: 10px;
   display: flex;
-  flex-direction: row;
-  border-radius: 4px;
-  overflow: hidden;
-
-  & > * {
-    display: block;
-    box-sizing: border-box;
-    border-bottom: 2px solid transparent;
-    padding: 15px 5px 13px;
-    height: 48px;
-    flex: 1 1 auto;
-    color: $darker-text-color;
-    text-align: center;
-    text-decoration: none;
-    cursor: pointer;
-  }
+  gap: 10px;
+  padding: 4px;
+  border: 1px solid var(--color-drawer-lines);
+  border-radius: var(--drawer-border-radius);
+  color: var(--color-drawer-fg);
+  font-size: 16px;
+  font-weight: 700;
+  background: var(--color-drawer-bg);
 
   a {
     transition: background 100ms ease-in;
 
-    &:focus,
+    &:focus-visible,
     &:hover {
-      outline: none;
-      background: lighten($ui-base-color, 3%);
+      background: var(--color-drawer-bg--hover);
       transition: background 200ms ease-out;
     }
   }
 }
 
+.layout-multiple-columns .drawer__tab {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  padding: 8px;
+  border: 0;
+  border-radius: var(--button-border-radius);
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  background: transparent;
+  transition: all 0.3s;
+
+  .gts-icon {
+    --size: 24px;
+
+    display: block;
+  }
+
+  &:focus-visible,
+  &:hover,
+  &.active {
+    background: darken($ui-base-color, 4%);
+  }
+}
+
+.layout-multiple-columns .drawer__tab:active {
+  transform: scale(0.9);
+}
+
 .search {
   position: relative;
-  margin-bottom: 10px;
   flex: none;
 
   @include limited-single-column(
@@ -129,6 +148,15 @@
   overflow: hidden;
 }
 
+.navigation-bar .compose__action-bar button {
+  display: flex;
+  padding: 6px;
+
+  svg.gts-icon {
+    --size: 20px;
+  }
+}
+
 .drawer--results {
   overflow-x: hidden;
   overflow-y: scroll;
@@ -191,20 +219,21 @@
 }
 
 .drawer__pager {
-  box-sizing: border-box;
-  padding: 0;
-  flex-grow: 1;
   position: relative;
-  overflow: hidden;
   display: flex;
-  border-radius: 4px;
+  flex-grow: 1;
+  padding: 0;
+  border: 1px solid var(--color-lines);
+  border-radius: var(--drawer-border-radius);
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .drawer__inner {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
-  background: lighten($ui-base-color, 13%);
+  background: var(--color-drawer-bg);
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -220,8 +249,8 @@
 }
 
 .drawer__inner__mastodon {
-  background: lighten($ui-base-color, 13%)
-    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
+  background: lighten($ui-base-color, 4%)
+    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z"/></svg>')
     no-repeat bottom / 100% auto;
   flex: 1;
   min-height: 47px;
@@ -275,7 +304,7 @@
           bottom /
           100%
           auto,
-        lighten($ui-base-color, 13%);
+        lighten($ui-base-color, 4%);
     } @else {
       background:
         url('~flavours/glitch/images/wave-drawer-glitched.png')
@@ -283,7 +312,7 @@
           bottom /
           100%
           auto,
-        lighten($ui-base-color, 13%);
+        lighten($ui-base-color, 4%);
     }
 
     & > .mastodon {
diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss
index f76288978..30daca4de 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji.scss
@@ -72,33 +72,19 @@
 
 .emoji-button {
   display: block;
-  padding-top: 5px;
-  padding-bottom: 2px;
-  padding-inline-start: 2px;
-  padding-inline-end: 5px;
-  outline: 0;
-  cursor: pointer;
+  padding: 4px;
+  border: 0;
+  color: $inverted-text-color;
+  background: transparent;
 
-  &:active,
-  &:focus {
-    outline: 0 !important;
-  }
+  svg {
+    --size: 24px;
 
-  img {
-    filter: grayscale(100%);
-    opacity: 0.8;
-    display: block;
     margin: 0;
-    width: 22px;
-    height: 22px;
   }
 
-  &:hover,
-  &:active,
-  &:focus {
-    img {
-      opacity: 1;
-      filter: none;
-    }
+  &:focus-visible,
+  &:hover {
+    color: $ui-highlight-color;
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss
index 784b06b00..375ed1077 100644
--- a/app/javascript/flavours/glitch/styles/components/local_settings.scss
+++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss
@@ -52,20 +52,21 @@
 }
 
 .glitch.local-settings__navigation__item {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   padding: 15px 20px;
-  color: inherit;
-  background: lighten($ui-secondary-color, 8%);
   border: 0;
   border-bottom: 1px $ui-secondary-color solid;
-  cursor: pointer;
-  text-decoration: none;
-  outline: none;
-  transition: background 0.3s;
-  box-sizing: border-box;
   width: 100%;
-  text-align: start;
+  box-sizing: border-box;
+  color: inherit;
   font-size: inherit;
+  text-align: start;
+  text-decoration: none;
+  background: lighten($ui-secondary-color, 8%);
+  cursor: pointer;
+  transition: background 0.3s;
 
   .text-icon-button {
     color: inherit;
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 535af9d0f..44f551430 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -186,8 +186,15 @@
 
   &__close,
   &__zoom-button {
+    padding: 6px;
     color: rgba($white, 0.7);
 
+    .gts-icon {
+      --size: 24px;
+
+      display: block;
+    }
+
     &:hover,
     &:focus,
     &:active {
@@ -279,6 +286,10 @@
     .icon-button {
       color: $white;
 
+      .gts-icon {
+        --size: 24px;
+      }
+
       &:hover,
       &:focus,
       &:active {
@@ -566,6 +577,12 @@
     padding-bottom: 8px;
     margin: 0 -5px;
 
+    .gts-icon {
+      --size: 20px;
+
+      display: block;
+    }
+
     .video-player__download__icon {
       color: inherit;
 
@@ -650,7 +667,7 @@
     &.active {
       overflow: visible;
       width: 50px;
-      margin-inline-end: 16px;
+      margin-inline: 16px;
     }
 
     &::before {
diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss
index 526209617..5a76232ec 100644
--- a/app/javascript/flavours/glitch/styles/components/misc.scss
+++ b/app/javascript/flavours/glitch/styles/components/misc.scss
@@ -168,14 +168,14 @@
 
   &:hover,
   &:active,
-  &:focus {
+  &:focus-visible {
     color: lighten($action-button-color, 7%);
     background-color: rgba($action-button-color, 0.15);
     transition: all 200ms ease-out;
     transition-property: background-color, color;
   }
 
-  &:focus {
+  &:focus-visible {
     background-color: rgba($action-button-color, 0.3);
   }
 
@@ -213,12 +213,12 @@
 
     &:hover,
     &:active,
-    &:focus {
+    &:focus-visible {
       color: darken($lighter-text-color, 7%);
       background-color: rgba($lighter-text-color, 0.15);
     }
 
-    &:focus {
+    &:focus-visible {
       background-color: rgba($lighter-text-color, 0.3);
     }
 
@@ -241,7 +241,7 @@
     background: rgba($base-overlay-background, 0.6);
     color: rgba($primary-text-color, 0.7);
     border-radius: 4px;
-    padding: 2px;
+    padding: 4px;
 
     &:hover {
       background: rgba($base-overlay-background, 0.9);
@@ -288,14 +288,14 @@
 
   &:hover,
   &:active,
-  &:focus {
+  &:focus-visible {
     color: darken($lighter-text-color, 7%);
     background-color: rgba($lighter-text-color, 0.15);
     transition: all 200ms ease-out;
     transition-property: background-color, color;
   }
 
-  &:focus {
+  &:focus-visible {
     background-color: rgba($lighter-text-color, 0.3);
   }
 
@@ -547,7 +547,9 @@ body > [data-popper-placement] {
   z-index: 9999;
 
   &__text-button {
-    display: inline;
+    display: flex;
+    align-items: center;
+    gap: 5px;
     color: inherit;
     background: transparent;
     border: 0;
@@ -1321,6 +1323,12 @@ button.icon-button.active i.fa-retweet {
   position: absolute;
   z-index: 100;
 
+  svg.gts-icon {
+    --size: 18px;
+
+    display: block;
+  }
+
   &--minified {
     display: flex;
     inset-inline-start: 4px;
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index d0db308a1..6049cac93 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -1063,6 +1063,12 @@
     position: absolute;
     top: 10px;
     inset-inline-end: 10px;
+    display: flex;
+    padding: 6px;
+
+    svg.gts-icon {
+      --size: 20px;
+    }
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index aa54fc26d..39e202a78 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -1,196 +1,175 @@
 .search {
-  margin-bottom: 10px;
   position: relative;
+}
 
-  &__popout {
-    box-sizing: border-box;
-    display: none;
-    position: absolute;
-    inset-inline-start: 0;
-    margin-top: -2px;
-    width: 100%;
-    background: $ui-base-color;
-    border-radius: 0 0 4px 4px;
-    box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-    z-index: 99;
-    font-size: 13px;
-    padding: 15px 5px;
+.search__icon,
+.search__icon.gts-icon {
+  --size: 20px;
 
-    h4 {
-      text-transform: uppercase;
-      color: $dark-text-color;
-      font-weight: 500;
-      padding: 0 10px;
-      margin-bottom: 10px;
-    }
-
-    &__menu {
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &__message {
-        color: $dark-text-color;
-        padding: 0 10px;
-      }
-
-      &__item {
-        display: block;
-        box-sizing: border-box;
-        width: 100%;
-        border: 0;
-        font: inherit;
-        background: transparent;
-        color: $darker-text-color;
-        padding: 10px;
-        cursor: pointer;
-        border-radius: 4px;
-        text-align: start;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-
-        &--flex {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        .icon-button {
-          transition: none;
-        }
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.selected {
-          background: $ui-highlight-color;
-          color: $primary-text-color;
-
-          .icon-button {
-            color: $primary-text-color;
-          }
-        }
-
-        mark {
-          background: transparent;
-          font-weight: 700;
-          color: $primary-text-color;
-        }
-
-        span {
-          overflow: inherit;
-          text-overflow: inherit;
-        }
-      }
-    }
-  }
-
-  &.active {
-    .search__popout {
-      display: block;
-    }
-  }
+  position: absolute;
+  top: 13px;
+  left: 13px;
 }
 
 .search__input {
   @include search-input;
 
   display: block;
-  padding: 15px;
-  padding-inline-end: 30px;
-  line-height: 18px;
+  padding: 12px 40px;
   font-size: 16px;
+  line-height: 20px;
 
   &::placeholder {
-    color: lighten($darker-text-color, 4%);
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
+    color: var(--color-search-placeholder);
+    font-weight: 500;
   }
 
   &:focus {
-    background: lighten($ui-base-color, 4%);
+    color: var(--color-search-fg--focus);
+    background: var(--color-search-bg--focus);
+  }
+
+  &:focus::placeholder {
+    color: var(--color-search-placeholder--focus);
   }
 }
 
-.search__icon {
-  &::-moz-focus-inner {
-    border: 0;
+.search__button {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  display: none;
+  padding: 6px;
+  border: 0;
+  border-radius: var(--button-border-radius);
+  color: inherit;
+  font: inherit;
+  background: transparent;
+  transition: all 0.3s;
+
+  .gts-icon {
+    --size: 20px;
+
+    display: block;
   }
 
-  &::-moz-focus-inner,
-  &:focus {
-    outline: 0 !important;
+  &:focus-visible,
+  &:hover {
+    background: darken($ui-base-color, 10%);
+  }
+}
+
+.search__button.active {
+  display: flex;
+}
+
+.search__popout {
+  position: absolute;
+  display: none;
+  margin-top: 10px;
+  padding: 15px 5px;
+  width: 100%;
+  border: 1px solid var(--color-lines);
+  border-radius: var(--drawer-border-radius);
+  box-sizing: border-box;
+  background: $ui-base-color;
+  inset-inline-start: 0;
+  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+  z-index: 99;
+
+  h4 {
+    text-transform: uppercase;
+    color: $dark-text-color;
+    font-weight: 500;
+    padding: 0 10px;
+    margin-bottom: 10px;
   }
 
-  .fa {
-    position: absolute;
-    top: 16px;
-    inset-inline-end: 10px;
-    display: inline-block;
-    opacity: 0;
-    transition: all 100ms linear;
-    transition-property: color, transform, opacity;
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-    color: $secondary-text-color;
-    cursor: default;
-    pointer-events: none;
+  &__menu {
+    margin-bottom: 20px;
 
-    &.active {
-      pointer-events: auto;
-      opacity: 0.3;
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &__message {
+      color: $dark-text-color;
+      padding: 0 10px;
+    }
+
+    &__item {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      border: 0;
+      font: inherit;
+      background: transparent;
+      color: $darker-text-color;
+      padding: 10px;
+      cursor: pointer;
+      border-radius: 4px;
+      text-align: start;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+
+      &--flex {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .icon-button {
+        transition: none;
+      }
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.selected {
+        background: $ui-highlight-color;
+        color: $primary-text-color;
+
+        .icon-button {
+          color: $primary-text-color;
+        }
+      }
+
+      mark {
+        background: transparent;
+        font-weight: 700;
+        color: $primary-text-color;
+      }
+
+      span {
+        overflow: inherit;
+        text-overflow: inherit;
+      }
     }
   }
+}
 
-  .fa-search {
-    transform: rotate(0deg);
+.search.active .search__popout {
+  display: block;
+}
 
-    &.active {
-      pointer-events: auto;
-      opacity: 0.3;
-    }
-  }
+.search-results__header,
+.search-results__section__header h3 {
+  display: flex;
+  gap: 5px;
+  align-items: center;
 
-  .fa-times-circle {
-    top: 17px;
-    transform: rotate(0deg);
-    color: $action-button-color;
-    cursor: pointer;
-
-    &.active {
-      transform: rotate(90deg);
-      opacity: 1;
-    }
-
-    &:hover {
-      color: lighten($action-button-color, 7%);
-    }
+  .gts-icon {
+    --size: 20px;
   }
 }
 
 .search-results__header {
-  color: $dark-text-color;
-  background: lighten($ui-base-color, 2%);
   padding: 15px;
+  color: $dark-text-color;
   font-weight: 500;
   font-size: 16px;
+  background: lighten($ui-base-color, 2%);
   cursor: default;
-
-  .fa {
-    display: inline-block;
-    margin-inline-end: 5px;
-  }
 }
 
 .search-results__info {
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index 7efcf0c09..a5012f56c 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -26,15 +26,8 @@
     }
   }
 
-  .search__input {
-    line-height: 18px;
-    font-size: 16px;
-    padding: 15px;
-    padding-inline-end: 30px;
-  }
-
-  .search__icon .fa {
-    top: 15px;
+  .search {
+    margin-bottom: 10px;
   }
 
   .navigation-bar {
@@ -288,11 +281,13 @@
     border-bottom: 1px solid lighten($ui-base-color, 8%);
   }
 
-  .column-header,
-  .column-back-button,
-  .scrollable,
-  .error-column {
-    border-radius: 0 !important;
+  .layout-single-column {
+    .column-header,
+    .column-back-button,
+    .scrollable,
+    .error-column {
+      border-radius: 0 !important;
+    }
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index e25636780..486c3cde6 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -48,13 +48,11 @@
 
 .status__content {
   position: relative;
-  margin: 10px 0;
   font-size: 15px;
   line-height: 20px;
   word-wrap: break-word;
   font-weight: 400;
   overflow: visible;
-  padding-top: 5px;
   clear: both;
 
   &:focus {
@@ -122,16 +120,6 @@
       font-size: 0.8em;
     }
   }
-
-  .status__content__spoiler-link {
-    background: lighten($ui-base-color, 30%);
-
-    &:hover,
-    &:focus {
-      background: lighten($ui-base-color, 33%);
-      text-decoration: none;
-    }
-  }
 }
 
 .translate-button {
@@ -143,36 +131,6 @@
   color: $dark-text-color;
 }
 
-.status__content__spoiler-link {
-  display: inline-block;
-  border-radius: 2px;
-  background: lighten($ui-base-color, 30%);
-  border: 0;
-  color: $inverted-text-color;
-  font-weight: 700;
-  font-size: 11px;
-  padding: 0 5px;
-  text-transform: uppercase;
-  line-height: inherit;
-  cursor: pointer;
-  vertical-align: top;
-
-  &:hover {
-    background: lighten($ui-base-color, 33%);
-    text-decoration: none;
-  }
-
-  .status__content__spoiler-icon {
-    display: inline-block;
-    margin-inline-start: 5px;
-    border-inline-start: 1px solid currentColor;
-    padding: 0;
-    padding-inline-start: 4px;
-    font-size: 16px;
-    vertical-align: -2px;
-  }
-}
-
 .notif-cleaning {
   .status,
   .notification {
@@ -194,11 +152,6 @@
   border-bottom: 1px solid lighten($ui-base-color, 8%);
 }
 
-.status__prepend-icon-wrapper {
-  inset-inline-start: -26px;
-  position: absolute;
-}
-
 .notification-follow,
 .notification-follow-request {
   position: relative;
@@ -232,7 +185,10 @@
 }
 
 .status {
-  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 15px;
   position: relative;
   height: auto;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -406,45 +362,6 @@
   overflow: hidden;
 }
 
-.status__info__account .status__display-name {
-  display: block;
-  max-width: 100%;
-}
-
-.status__info {
-  display: flex;
-  justify-content: space-between;
-  font-size: 15px;
-
-  > span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .notification__message > span {
-    word-wrap: break-word;
-  }
-}
-
-.status__info__icons {
-  display: flex;
-  align-items: center;
-  height: 1em;
-  color: $action-button-color;
-
-  .status__media-icon,
-  .status__visibility-icon,
-  .status__reply-icon,
-  .text-icon {
-    padding-inline-start: 2px;
-    padding-inline-end: 2px;
-  }
-
-  .status__collapse-button.active > .fa-angle-double-up {
-    transform: rotate(-180deg);
-  }
-}
-
 .no-reduce-motion .status__collapse-button {
   &.activate {
     & > .fa-angle-double-up {
@@ -459,12 +376,6 @@
   }
 }
 
-.status__info__account {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
 .status-check-box__status {
   display: block;
   box-sizing: border-box;
@@ -500,42 +411,29 @@
   }
 }
 
-.status__prepend {
-  margin-top: -2px;
-  margin-bottom: 8px;
-  margin-inline-start: 58px;
-  color: $dark-text-color;
-  font-size: 14px;
-  position: relative;
-
-  .status__display-name strong {
-    color: $dark-text-color;
-  }
-
-  > span {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
 .status__action-bar {
-  align-items: center;
   display: flex;
-  margin-top: 8px;
-}
+  gap: 10px;
+  align-items: center;
 
-.status__action-bar-button {
-  margin-inline-end: 18px;
+  svg.gts-icon {
+    --size: 20px;
+  }
 
-  &.icon-button--with-counter {
-    margin-inline-end: 14px;
+  &.detailed-status__action-bar {
+    svg.gts-icon {
+      --size: 24px;
+    }
   }
 }
 
-.status__action-bar-dropdown {
-  height: 23.15px;
-  width: 23.15px;
+.status__action-bar-button,
+.status__action-bar .icon-button {
+  padding: 6px;
+
+  svg.gts-icon {
+    display: block;
+  }
 }
 
 .status__action-bar-spacer {
diff --git a/app/javascript/flavours/glitch/styles/gts.scss b/app/javascript/flavours/glitch/styles/gts.scss
new file mode 100644
index 000000000..75d3e69cd
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts.scss
@@ -0,0 +1,136 @@
+/* 🦥 GoToSocial */
+
+/* Variables */
+:root {
+  --drawer-border-radius: 8px;
+  --button-border-radius: 6px;
+}
+
+/* Icons debug */
+.fa {
+  background: red;
+}
+
+/* Diff */
+.gts-icon {
+  --size: 1em;
+
+  display: inline-block;
+  width: var(--size);
+  height: var(--size);
+}
+
+.gts-icon-with-badge {
+  position: relative;
+  display: block;
+
+  &__badge {
+    --size: 20px;
+
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: 4px;
+    min-width: var(--size);
+    height: var(--size);
+    box-sizing: border-box;
+    border: 2px solid darken($ui-base-color, 7%);
+    border-radius: 50%;
+    color: $primary-text-color;
+    font-size: 10px;
+    font-weight: 500;
+    background: $ui-highlight-color;
+  }
+
+  &__issue-badge {
+    position: absolute;
+    background: $error-red;
+  }
+
+  .gts-icon {
+    display: block;
+  }
+}
+
+.drawer__tab .gts-icon,
+.column-header .gts-icon,
+.column-link .gts-icon,
+.local-settings__navigation__item .gts-icon {
+  --size: 24px;
+}
+
+.navigation-panel {
+  justify-content: start;
+}
+
+.column-header__icon {
+  margin: 0;
+}
+
+.column-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.column-link__icon {
+  margin: 0;
+}
+
+.search__icon > svg {
+  display: none;
+  position: absolute;
+  top: 16px;
+  inset-inline-end: 10px;
+  width: 18px;
+  height: 18px;
+  color: $secondary-text-color;
+
+  &.active {
+    display: block;
+  }
+}
+
+.notification__filter-bar svg,
+.status__info__icons svg {
+  --size: 18px;
+
+  width: var(--size);
+  height: var(--size);
+}
+
+.detailed-status__meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1ch;
+}
+
+.column-header__back-button,
+.column-back-button,
+.detailed-status__link {
+  display: flex;
+  align-items: center;
+}
+
+.column-back-button--slim-button svg {
+  margin-block: -3px;
+}
+
+.detailed-status__meta svg {
+  --size: 16px;
+
+  width: var(--size);
+  height: var(--size);
+}
+
+.notification__favourite-icon-wrapper svg {
+  --size: 16px;
+
+  width: var(--size);
+  height: var(--size);
+  color: $highlight-text-color;
+}
diff --git a/app/javascript/flavours/glitch/styles/gts/_config.scss b/app/javascript/flavours/glitch/styles/gts/_config.scss
new file mode 100644
index 000000000..f52cf0f1c
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/_config.scss
@@ -0,0 +1,13 @@
+/* GoToSocial 🦥
+
+  The place for all the rewritten components.
+  Legacy components will be in the parent directory.
+  This’ll help keep track of renoavation work.
+*/
+
+/* 🛠️ Config */
+@import 'colors';
+@import 'sizes';
+
+/* 🧩 Components */
+@import 'status';
diff --git a/app/javascript/flavours/glitch/styles/gts/colors.scss b/app/javascript/flavours/glitch/styles/gts/colors.scss
new file mode 100644
index 000000000..d92645c69
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/colors.scss
@@ -0,0 +1,69 @@
+/* 🎨 Colors */
+:root {
+    color-scheme: dark;
+
+    /* Base */
+    --color-fg: #fff;
+    --color-bg: #191b22;
+    --color-lines: #3d4455;
+
+    /* Accent */
+    --color-accent: #8c8dff;
+    --color-accent-hover: #a3a3ff;
+    --color-accent-focus: var(--color-accent-hover);
+    --color-accent-bg: #1f232b;
+    --color-accent-fg: #9baec8;
+    --color-accent-lines: rgba(172, 172, 249, 0.3);
+    --color-accent-muted-fg: #666f7a;
+
+    /* Secondary */
+    --color-secondary-fg: #9c9ba6;
+    --color-secondary-bg: #13111f;
+
+    /* Content */
+    --color-content-fg: var(--color-fg);
+    --color-content-secondary-bg: var(--color-secondary-bg);
+
+    /* State: Success */
+    --color-success-bg: #d1e3dd;
+    --color-success-fg: #3a654e;
+    --color-success-lines: var(--color-success-bg);
+
+    /* State: Destructive */
+    --color-destructive-bg: #f8c6cd;
+    --color-destructive-fg: #a11c32;
+    --color-destructive-lines: var(--color-destructive-bg);
+
+    /* UI */
+    --color-ui-base: ;
+    --color-ui-bg: ;
+
+    /* Button */
+    --color-button-fg-destructive: red;
+
+    /* Drawer */
+    --color-drawer-bg: #313543;
+    --color-drawer-bg--hover: #1f232b;
+    --color-drawer-fg: #9baec8;
+    --color-drawer-lines: var(--color-accent-lines);
+
+    /* Notifications */
+    --color-notifications-bg: var(--color-accent-bg);
+    --color-notifications-bg--active: #313543;
+    --color-notifications-bg--hover: var(--color-lines);
+    --color-notifications-fg: #9baec8;
+    --color-notifications-lines: var(--color-accent-lines);
+
+    /* Search */
+    --color-search-bg: var(--color-accent-bg);
+    --color-search-bg--focus: #1f232b;
+    --color-search-fg: var(--color-fg);
+    --color-search-fg--focus: var(--color-fg);
+    --color-search-lines: var(--color-accent-lines);
+    --color-search-placeholder: #9baec8;
+    --color-search-placeholder--focus: #5e6a7a;
+
+    /* Status */
+    --color-status-fg: ;
+    --color-status-bg: #282c37;
+}
diff --git a/app/javascript/flavours/glitch/styles/gts/sizes.scss b/app/javascript/flavours/glitch/styles/gts/sizes.scss
new file mode 100644
index 000000000..c9b3befd7
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/sizes.scss
@@ -0,0 +1,4 @@
+/* 📏 Sizes */
+:root {
+    --size-layout-gap: 10px;
+}
diff --git a/app/javascript/flavours/glitch/styles/gts/status.scss b/app/javascript/flavours/glitch/styles/gts/status.scss
new file mode 100644
index 000000000..b926e2902
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/status.scss
@@ -0,0 +1,15 @@
+/* 🚥 Status */
+@import 'status/status-account';
+@import 'status/status-display-name';
+@import 'status/status-icons';
+@import 'status/status-info';
+@import 'status/status-prepend';
+@import 'status/status-spoiler';
+
+.status__content {
+    line-height: 1.5;
+}
+
+.status__action-bar :is(a, button) {
+    color: var(--color-secondary-fg);
+}
diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-account.scss b/app/javascript/flavours/glitch/styles/gts/status/status-account.scss
new file mode 100644
index 000000000..05de83b63
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/status/status-account.scss
@@ -0,0 +1,8 @@
+/* 🚥 Status: Account */
+.status__info__account {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 10px;
+    overflow: hidden;
+    text-overflow: clip;
+}
diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss b/app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss
new file mode 100644
index 000000000..1bddc3068
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss
@@ -0,0 +1,30 @@
+/* 🚥 Status: Display name */
+.status__display-name {
+    align-self: start;
+    justify-self: start;
+    color: var(--color-content-fg);
+    font-size: 15px;
+    text-decoration: none;
+    overflow: hidden;
+
+    .display-name {
+        font-weight: 700;
+        text-overflow: clip;
+    }
+
+    .display-name__html {
+        font-weight: 700;
+    }
+
+    .display-name__account {
+        color: var(--color-secondary-fg);
+        font-weight: 400;
+    }
+
+    &:hover .display-name__html {
+        text-decoration-line: underline;
+        text-decoration-color: currentColor;
+        text-decoration-thickness: 2px;
+        text-underline-offset: 2px;
+    }
+}
diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-icons.scss b/app/javascript/flavours/glitch/styles/gts/status/status-icons.scss
new file mode 100644
index 000000000..69fb1916e
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/status/status-icons.scss
@@ -0,0 +1,46 @@
+/* 🚥 Status: Icons */
+.status__info__icons {
+    position: relative;
+    display: flex;
+    gap: 5px;
+    align-items: start;
+    color: var(--color-secondary-fg);
+
+    svg.gts-icon {
+        --size: 18px;
+
+        display: block;
+    }
+
+    .text-icon {
+        line-height: 20px;
+    }
+
+    &::before {
+        position: absolute;
+        top: 0;
+        right: calc(100% + 5px);
+        width: 20px;
+        height: 100%;
+        content: '';
+        background: linear-gradient(90deg, transparent, var(--color-status-bg));
+        transition: all 0.2s;
+    }
+}
+
+.status__info__icons button.icon-button {
+    display: block;
+    color: inherit;
+
+    svg.gts-icon {
+        transition: transform ease-in-out 0.2s;
+    }
+
+    &.active svg.gts-icon {
+        transform: rotate(-180deg);
+    }
+
+    &:hover {
+        color: var(--color-accent-hover);
+    }
+}
diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-info.scss b/app/javascript/flavours/glitch/styles/gts/status/status-info.scss
new file mode 100644
index 000000000..52a13843e
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/status/status-info.scss
@@ -0,0 +1,10 @@
+/* 🚥 Status: Info */
+.status__info {
+    display: grid;
+    gap: 5px;
+    grid-template-columns: 1fr auto;
+
+    .notification__message {
+        grid-column: 1/-1;
+    }
+}
diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss b/app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss
new file mode 100644
index 000000000..b4c19a2fb
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss
@@ -0,0 +1,43 @@
+/* 🚥 Status: Prepend */
+.status__prepend {
+    display: inline-flex;
+    align-items: center;
+    align-self: start;
+    gap: 5px;
+    padding: 5px 10px;
+    border: 1px solid var(--color-accent-lines);
+    border-radius: 50px;
+    color: var(--color-accent-fg);
+    font-size: 13px;
+    font-weight: 500;
+    background-color: var(--color-accent-bg);
+
+    &:focus-within {
+        outline: 2px solid var(--color-accent-focus);
+        outline-offset: 3px;
+    }
+}
+
+.status__prepend-icon {
+    --size: 18px;
+
+    display: block;
+    width: var(--size);
+    height: var(--size);
+}
+
+.status__prepend-display-name {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: var(--color-accent-muted-fg);
+
+    &:hover {
+        color: inherit;
+        text-decoration-thickness: 2px;
+    }
+
+    &:focus-visible {
+        color: var(--color-accent-focus);
+        outline-color: transparent;
+    }
+}
diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-spoiler.scss b/app/javascript/flavours/glitch/styles/gts/status/status-spoiler.scss
new file mode 100644
index 000000000..05c4f6921
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/gts/status/status-spoiler.scss
@@ -0,0 +1,23 @@
+/* 🚥 Status: Spoiler link */
+.status__content__spoiler-link {
+    display: flex;
+    gap: 5px;
+    margin-top: 5px;
+    padding: 5px 8px;
+    border: 1px solid var(--color-accent-lines);
+    border-radius: 8px;
+    color: var(--color-accent-fg);
+    font-size: 12px;
+    font-weight: 500;
+    background: var(--color-accent-bg);
+    transition: all 0.3s;
+
+    .gts-icon {
+        --size: 14px;
+    }
+
+    &:hover {
+        border-color: var(--color-lines);
+        color: var(--color-fg);
+    }
+}
diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss
index 1cb913c8b..ffebce630 100644
--- a/app/javascript/flavours/glitch/styles/index.scss
+++ b/app/javascript/flavours/glitch/styles/index.scss
@@ -22,3 +22,7 @@
 @import 'rtl';
 @import 'dashboard';
 @import 'rich_text';
+
+@import 'gts';
+@import 'gts/config';
+@import 'tangerine/config';
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light.scss b/app/javascript/flavours/glitch/styles/mastodon-light.scss
index 8fc132651..1f4a7d7ba 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light.scss
@@ -1,3 +1,4 @@
 @import 'mastodon-light/variables';
 @import 'index';
 @import 'mastodon-light/diff';
+@import 'mastodon-light/colors';
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/colors.scss b/app/javascript/flavours/glitch/styles/mastodon-light/colors.scss
new file mode 100644
index 000000000..e9a0264bc
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/colors.scss
@@ -0,0 +1,38 @@
+/* 🎨 Colors */
+:root {
+  color-scheme: light;
+
+  /* Base */
+  --color-fg: #000;
+  --color-bg: #eff3f5;
+  --color-lines: #c0cdd9;
+
+  /* Accent */
+  --color-accent-bg: #d9e1e8;
+  --color-accent-fg: #282c37;
+  --color-accent-lines: #c0cdd9;
+
+  /* Secondary */
+  --color-secondary-fg: #606984;
+
+  /* Drawer */
+  --color-drawer-bg: #fff;
+  --color-drawer-bg--hover: #ccd7e0;
+  --color-drawer-fg: var(--color-fg);
+
+  /* Notifications */
+  --color-notifications-bg--active: #fff;
+  --color-notifications-bg--hover: #fff9;
+  --color-notifications-fg: var(--color-fg);
+
+  /* Search */
+  --color-search-bg--focus: #ccd7e0;
+  --color-search-fg: #282c37;
+  --color-search-fg--focus: var(--color-fg);
+  --color-search-placeholder: var(--color-search-fg);
+  --color-search-placeholder--focus: #5e6a7a;
+
+  /* Status */
+  --color-status-fg: var(--color-fg);
+  --color-status-bg: #fff;
+}
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 456252750..af9faacf1 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -61,7 +61,6 @@ html {
 .column-back-button,
 .column-header {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-top: 0;
@@ -179,23 +178,12 @@ html {
   border-top-color: lighten($ui-base-color, 8%);
 }
 
-.notification__filter-bar {
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
-}
-
 .compose-form .compose-form__buttons-wrapper {
   background: $ui-base-color;
   border: 1px solid lighten($ui-base-color, 8%);
   border-top: 0;
 }
 
-.drawer__header,
-.drawer__inner {
-  background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-}
-
 .drawer__inner__mastodon {
   background: $white
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
@@ -634,11 +622,6 @@ html {
   }
 }
 
-.notification__filter-bar button.active::after,
-.account__section-headline a.active::after {
-  border-color: transparent transparent $white;
-}
-
 .hero-widget,
 .moved-account-widget,
 .memoriam-widget,
diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss
index 4566a013a..4cab02895 100644
--- a/app/javascript/flavours/glitch/styles/polls.scss
+++ b/app/javascript/flavours/glitch/styles/polls.scss
@@ -25,6 +25,12 @@
     }
   }
 
+  &__text button {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
   progress {
     border: 0;
     display: block;
@@ -182,6 +188,8 @@
   }
 
   &__footer {
+    display: flex;
+    gap: 5px;
     padding-top: 6px;
     padding-bottom: 5px;
     color: $dark-text-color;
diff --git a/app/javascript/flavours/glitch/styles/tangerine/_config.scss b/app/javascript/flavours/glitch/styles/tangerine/_config.scss
new file mode 100644
index 000000000..58eefaab2
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/tangerine/_config.scss
@@ -0,0 +1,10 @@
+/*  Tangerine UI 🍊
+
+    Large parts of this work are from Tangerine UI by @nileane@nileane.fr: https://github.com/nileane/TangerineUI-for-Mastodon/
+*/
+
+/* 🛠️ Config */
+@import 'keyframes';
+
+/* 🧩 Components */
+@import 'status-bar';
diff --git a/app/javascript/flavours/glitch/styles/tangerine/keyframes.scss b/app/javascript/flavours/glitch/styles/tangerine/keyframes.scss
new file mode 100644
index 000000000..8e931d297
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/tangerine/keyframes.scss
@@ -0,0 +1,152 @@
+/* 🔑 Keyframes */
+@keyframes bounce {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.6);
+    }
+
+    75% {
+        transform: scale(0.8);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes bounce-sml {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.25);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes bounce-vertical {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-30%);
+    }
+
+    75% {
+        transform: translateY(20%);
+    }
+
+    100% {
+        transform: translate(0);
+    }
+}
+
+@keyframes launch {
+    0% {
+        transform: translate(0);
+        opacity: 0;
+    }
+
+    5% {
+        transform: translate(0);
+        opacity: 1;
+    }
+
+    50% {
+        transform: translate(200%, -200%);
+        opacity: 0;
+    }
+
+    80% {
+        transform: translate(200%, -200%);
+        opacity: 0;
+    }
+
+    85% {
+        transform: translate(-20%, 20%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translate(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+        transform: translateY(-10%);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadein-short {
+    from {
+        transform: translate(0, -10px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes slowin {
+    0% {
+        opacity: 0;
+    }
+
+    20% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes rotate-bounce {
+    0% {
+        transform: rotate(0) scale(1);
+    }
+
+    60% {
+        transform: rotate(80deg) scale(1.2);
+    }
+
+    100% {
+        transform: rotate(60deg) scale(1.1);
+    }
+}
+
+@keyframes bell-ring {
+    0% {
+        transform: rotate(0);
+    }
+
+    40% {
+        transform: rotate(15deg);
+    }
+
+    70% {
+        transform: rotate(-15deg);
+    }
+
+    100% {
+        transform: rotate(0);
+    }
+}
diff --git a/app/javascript/flavours/glitch/styles/tangerine/status-bar.scss b/app/javascript/flavours/glitch/styles/tangerine/status-bar.scss
new file mode 100644
index 000000000..1f8c59d33
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/tangerine/status-bar.scss
@@ -0,0 +1,12 @@
+/* 🚥 Status Bar */
+.status-favourite.active svg {
+    animation: bounce 0.4s ease-out;
+}
+
+.status-boost.active svg {
+    animation: launch 1.2s ease-in 1;
+}
+
+.status-bookmark.active svg {
+    animation: bounce-vertical 0.4s ease-out;
+}
diff --git a/app/javascript/mastodon/features/firehose/index.jsx b/app/javascript/mastodon/features/firehose/index.jsx
index 1bd244ed2..193ab3121 100644
--- a/app/javascript/mastodon/features/firehose/index.jsx
+++ b/app/javascript/mastodon/features/firehose/index.jsx
@@ -159,7 +159,7 @@ const Firehose = ({ feedType, multiColumn }) => {
   return (
     <Column bindToDocument={!multiColumn} ref={columnRef} label={intl.formatMessage(messages.title)}>
       <ColumnHeader
-        icon='globe'
+        icon='planet'
         active={hasUnread}
         title={intl.formatMessage(messages.title)}
         onPin={handlePin}
diff --git a/app/javascript/mastodon/features/getting_started/index.jsx b/app/javascript/mastodon/features/getting_started/index.jsx
index 788c00bcc..e4ef2eb12 100644
--- a/app/javascript/mastodon/features/getting_started/index.jsx
+++ b/app/javascript/mastodon/features/getting_started/index.jsx
@@ -108,7 +108,7 @@ class GettingStarted extends ImmutablePureComponent {
 
     navItems.push(
       <ColumnLink key='community_timeline' icon='users' text={intl.formatMessage(messages.community_timeline)} to='/public/local' />,
-      <ColumnLink key='public_timeline' icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/public' />,
+      <ColumnLink key='public_timeline' icon='planet' text={intl.formatMessage(messages.public_timeline)} to='/public' />,
     );
 
     if (signedIn) {
@@ -116,9 +116,9 @@ class GettingStarted extends ImmutablePureComponent {
         <ColumnSubheading key='header-personal' text={intl.formatMessage(messages.personal)} />,
         <ColumnLink key='home' icon='home' text={intl.formatMessage(messages.home_timeline)} to='/home' />,
         <ColumnLink key='direct' icon='at' text={intl.formatMessage(messages.direct)} to='/conversations' />,
-        <ColumnLink key='bookmark' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />,
+        <ColumnLink key='bookmark' icon='bookmarks' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />,
         <ColumnLink key='favourites' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
-        <ColumnLink key='lists' icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />,
+        <ColumnLink key='lists' icon='list' text={intl.formatMessage(messages.lists)} to='/lists' />,
       );
 
       if (myAccount.get("locked") || unreadFollowRequests > 0) {
@@ -127,7 +127,7 @@ class GettingStarted extends ImmutablePureComponent {
 
       navItems.push(
         <ColumnSubheading key='header-settings' text={intl.formatMessage(messages.settings_subheading)} />,
-        <ColumnLink key='preferences' icon='gears' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />,
+        <ColumnLink key='preferences' icon='gear' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />,
       );
     }
 
diff --git a/app/javascript/mastodon/features/public_timeline/index.jsx b/app/javascript/mastodon/features/public_timeline/index.jsx
index deaaf0c6f..8fdc5112e 100644
--- a/app/javascript/mastodon/features/public_timeline/index.jsx
+++ b/app/javascript/mastodon/features/public_timeline/index.jsx
@@ -131,7 +131,7 @@ class PublicTimeline extends PureComponent {
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
         <ColumnHeader
-          icon='globe'
+          icon='planet'
           active={hasUnread}
           title={intl.formatMessage(messages.title)}
           onPin={this.handlePin}
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 6714b2426..ba9c3e50c 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -16,7 +16,7 @@ body {
   text-rendering: optimizelegibility;
   font-feature-settings: 'kern';
   text-size-adjust: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
 
   &.system-font {
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 08460396f..7867776bb 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -60,7 +60,7 @@ $ui-button-destructive-background-color: $red-500 !default;
 $ui-button-destructive-focus-background-color: $red-600 !default;
 
 $ui-button-icon-focus-outline: $ui-button-focus-outline !default;
-$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
+$ui-button-icon-hover-background-color: rgba(140, 141, 255, 0.4) !default;
 
 // Variables for texts
 $primary-text-color: $white !default;
diff --git a/public/icons.svg b/public/icons.svg
new file mode 100644
index 000000000..e39481c4b
--- /dev/null
+++ b/public/icons.svg
@@ -0,0 +1,478 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <symbol id="gts" viewBox="0 0 1000 1000">
+      <a fill="#df8958" transform="translate(26 -4)">
+        <path d="M875 572c49 42 40 102 10 129 14 129-72 124-85 75-43 55-73 35-78 32a431 431 0 0 1-479 0c-33 21-66 8-85-21-67 71-99-11-80-61-48-24-46-82 12-153q-3-23-3-46c0-136 93-286 211-313-77-50 4-110 86-50 28-68 97-68 99-9 107-2 167 38 220 66 29 15 64 32 105 33 50 3 76 56 23 98 31 52 44 105 44 220"/>
+      </a>
+      <a transform="translate(26 -4)">
+        <path fill="#e68933" d="M743 326c36 0 58 11 117-19q-2 22-29 45l6 10c-47-4-79-21-94-36"/>
+      </a>
+      <path fill="#e68933" d="M808 622c11 46 57 77 103 76 14 129-72 123-86 74-42 55-72 35-78 32-51 37-136 72-240 72-90 0-173-27-239-72-32 21-65 9-84-21-68 71-100-10-80-61-49-24-47-82 12-153q-4-22-4-46c0-136 94-286 212-313-31-20-36-41-27-56 12 31 53 59 102 62-119 38-83 85-18 120 88 139 421 197 427 286"/>
+      <path fill="#e8e7e5" d="M361 332q-33-1-70 12c-59 22-90 71-103 125 38-27 69-44 131-47 101-5 137 69 137 100 1 34-13 54-39 68-30 17-92 20-109 19-44 0-71-8-122-19 28 142 163 229 323 229s295-87 323-229c-51 11-78 19-122 19-17 1-79-2-109-19a69 69 0 0 1-39-68c0-31 35-105 137-100 62 3 93 20 131 47-13-54-44-103-103-125-101-37-169 19-218 20-37-1-84-32-148-32m475 176v2zm1 9v14zm0 27v2zm0 8v2zm-4 30v2zM188 469"/>
+      <path fill="#d3d0d6" d="M359 332q-32-1-68 12c-59 22-90 71-103 125q24-18 50-30c15-46 58-86 135-107zm-83 275c-27-2-52-9-90-17 28 142 163 229 323 229 139 0 259-66 307-176-220 172-445 90-540-36m-93-38-1-1zm-2-23v-1zm0-23v-3zm0-3v-5zm0-5v-2zm0-2 1-5zm3-25v-1zm3-16v1zm-1 8"/>
+      <path fill="#77889b" d="M456 522c0-31-36-105-137-100-62 3-93 20-131 47a282 282 0 0 0-2 121c51 11 78 19 122 19 17 1 79-2 109-19 26-14 40-34 39-68m106 0c0-31 35-105 137-100 62 3 93 20 131 47a282 282 0 0 1 2 121c-51 11-78 19-122 19-17 1-79-2-109-19a69 69 0 0 1-39-68"/>
+      <path fill="#5e6f7e" d="M237 440q-24 12-49 30a282 282 0 0 0-2 120c38 9 63 15 91 18-37-47-54-110-40-168"/>
+      <path fill="#333a42" d="M418 531c0 24-23 29-32 8q-8-20-31-19c-12 0-24 11-27 19-6 19-32 16-33-4 0-28 27-55 61-57s62 29 62 53m122 63q3-3 4-8t-2-9l-5-4-7-1q-10-3-21-2l-28 3-5 4q-3 5-2 9 1 5 4 8 5 8 14 9 8 2 17 2 9 1 17-2 9-2 14-9m-3 70q19 3 34-7l6-6q2-3 1-8-1-3-5-5-3-2-8-1l-5 2q-10 4-21 4-12-1-21-7-5-3-9-9l-9 9q-10 6-21 7-11 0-22-4l-5-2q-3-1-7 1t-5 5q-1 5 1 8l6 6q15 10 34 7 16-1 28-10 13 9 28 10m63-133c0 24 23 29 32 8q8-20 31-19c12 0 24 11 26 19 6 20 33 16 33-3 1-29-26-56-60-58s-62 29-62 53"/>
+    </symbol>
+    
+    <symbol id="arrow-bend-up-left" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M80,56v96L32,104Z" opacity="0.2"></path>
+        <path d="M128,96H88V56a8,8,0,0,0-13.66-5.66l-48,48a8,8,0,0,0,0,11.32l48,48A8,8,0,0,0,88,152V112h40a88.1,88.1,0,0,1,88,88,8,8,0,0,0,16,0A104.11,104.11,0,0,0,128,96ZM72,132.69,43.31,104,72,75.31Z"></path>
+    </symbol>
+    
+    <symbol id="arrow-bend-double-up-left" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M128,56v96L80,104Z" opacity="0.2"></path>
+        <path d="M85.66,146.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,61.66L43.31,104ZM232,200a8,8,0,0,1-16,0,88.11,88.11,0,0,0-80-87.63V152a8,8,0,0,1-13.66,5.66l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,136,56V96.3A104.15,104.15,0,0,1,232,200ZM120,75.31,91.31,104,120,132.69Z"></path>
+    </symbol>
+    
+    <symbol id="arrow-bend-double-up-left-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M85.66,146.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,61.66L43.31,104ZM136,96.3V56a8,8,0,0,0-13.66-5.66l-48,48a8,8,0,0,0,0,11.32l48,48A8,8,0,0,0,136,152V112.37A88.11,88.11,0,0,1,216,200a8,8,0,0,0,16,0A104.15,104.15,0,0,0,136,96.3Z"></path>
+    </symbol>
+    
+    <symbol id="arrow-counter-clockwise" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z" opacity="0.2"></path>
+        <path d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"></path>
+    </symbol>
+    
+    <symbol id="arrow-left" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
+    </symbol>
+    
+    <symbol id="arrow-square-out" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M184,80V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H176A8,8,0,0,1,184,80Z" opacity="0.2"></path>
+        <path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path>
+    </symbol>
+
+    <symbol id="arrows-clockwise" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z" opacity="0.2"></path>
+        <path d="M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z"></path>
+    </symbol>
+    
+    <symbol id="arrows-out-simple" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z"></path>
+    </symbol>
+    
+    <symbol id="arrows-out-simple" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M117.66,138.34a8,8,0,0,1,0,11.32L83.31,184l18.35,18.34A8,8,0,0,1,96,216H48a8,8,0,0,1-8-8V160a8,8,0,0,1,13.66-5.66L72,172.69l34.34-34.35A8,8,0,0,1,117.66,138.34ZM208,40H160a8,8,0,0,0-5.66,13.66L172.69,72l-34.35,34.34a8,8,0,0,0,11.32,11.32L184,83.31l18.34,18.35A8,8,0,0,0,216,96V48A8,8,0,0,0,208,40Z"></path>
+    </symbol>
+    
+    <!-- TODO: Duplicate ID, different content -->
+    <symbol id="arrows-in-simple" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M213.66,53.66,163.31,104H192a8,8,0,0,1,0,16H144a8,8,0,0,1-8-8V64a8,8,0,0,1,16,0V92.69l50.34-50.35a8,8,0,0,1,11.32,11.32ZM112,136H64a8,8,0,0,0,0,16H92.69L42.34,202.34a8,8,0,0,0,11.32,11.32L104,163.31V192a8,8,0,0,0,16,0V144A8,8,0,0,0,112,136Z"></path>
+    </symbol>
+    
+    <symbol id="arrows-in-simple" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M120,144v48a8,8,0,0,1-13.66,5.66L88,179.31,53.66,213.66a8,8,0,0,1-11.32-11.32L76.69,168,58.34,149.66A8,8,0,0,1,64,136h48A8,8,0,0,1,120,144ZM213.66,42.34a8,8,0,0,0-11.32,0L168,76.69,149.66,58.34A8,8,0,0,0,136,64v48a8,8,0,0,0,8,8h48a8,8,0,0,0,5.66-13.66L179.31,88l34.35-34.34A8,8,0,0,0,213.66,42.34Z"></path>
+    </symbol>
+    
+    <symbol id="asterisk" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M200,128a72,72,0,1,1-72-72A72,72,0,0,1,200,128Z" opacity="0.2"></path>
+        <path d="M214.86,180.12a8,8,0,0,1-11,2.74L136,142.13V216a8,8,0,0,1-16,0V142.13L52.12,182.86a8,8,0,1,1-8.23-13.72L112.45,128,43.89,86.86a8,8,0,1,1,8.23-13.72L120,113.87V40a8,8,0,0,1,16,0v73.87l67.88-40.73a8,8,0,1,1,8.23,13.72L143.55,128l68.56,41.14A8,8,0,0,1,214.86,180.12Z"></path>
+    </symbol>
+    
+    <symbol id="at" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path>
+        <path d="M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"></path>
+    </symbol>
+    
+    <symbol id="bell" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z" opacity="0.2"></path>
+        <path d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"></path>
+    </symbol>
+    
+    <symbol id="bell-slash" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z" opacity="0.2"></path>
+        <path d="M53.92,34.62A8,8,0,1,0,42.08,45.38L58.82,63.8A79.59,79.59,0,0,0,48,104c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.8a40,40,0,0,0,78.4,0h15.44l19.44,21.38a8,8,0,1,0,11.84-10.76ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a63.65,63.65,0,0,1,6.26-27.62L168.09,184Zm166-4.73a8.13,8.13,0,0,1-2.93.55,8,8,0,0,1-7.44-5.08C196.35,156.19,192,129.75,192,104A64,64,0,0,0,96.43,48.31a8,8,0,0,1-7.9-13.91A80,80,0,0,1,208,104c0,35.35,8.05,58.59,10.52,64.88A8,8,0,0,1,214,179.25Z"></path>
+    </symbol>
+    
+    <symbol id="bell-ringing" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,147.81,56,112a72,72,0,0,1,144,0c0,35.82,8.3,56.6,14.9,68A8,8,0,0,1,208,192Z" opacity="0.2"></path>
+        <path d="M224,71.1a8,8,0,0,1-10.78-3.42,94.13,94.13,0,0,0-33.46-36.91,8,8,0,1,1,8.54-13.54,111.46,111.46,0,0,1,39.12,43.09A8,8,0,0,1,224,71.1ZM35.71,72a8,8,0,0,0,7.1-4.32A94.13,94.13,0,0,1,76.27,30.77a8,8,0,1,0-8.54-13.54A111.46,111.46,0,0,0,28.61,60.32,8,8,0,0,0,35.71,72Zm186.1,103.94A16,16,0,0,1,208,200H167.2a40,40,0,0,1-78.4,0H48a16,16,0,0,1-13.79-24.06C43.22,160.39,48,138.28,48,112a80,80,0,0,1,160,0C208,138.27,212.78,160.38,221.81,175.94ZM150.62,200H105.38a24,24,0,0,0,45.24,0ZM208,184c-10.64-18.27-16-42.49-16-72a64,64,0,0,0-128,0c0,29.52-5.38,53.74-16,72Z"></path>
+    </symbol>
+    
+    <symbol id="bookmark" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M192,176v48l-64-40L64,224V176l64-40Z" opacity="0.2"></path>
+        <path d="M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,16V161.57l-51.77-32.35a8,8,0,0,0-8.48,0L72,161.56V48ZM132.23,177.22a8,8,0,0,0-8.48,0L72,209.57V180.43l56-35,56,35v29.14Z"></path>
+    </symbol>
+    
+    <symbol id="bookmark-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32ZM132.23,177.22a8,8,0,0,0-8.48,0L72,209.57V180.43l56-35,56,35v29.14Z"></path>
+    </symbol>
+    
+    <symbol id="bookmarks" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M200,40V192l-32-22.85V72a8,8,0,0,0-8-8H88V40a8,8,0,0,1,8-8h96A8,8,0,0,1,200,40Z" opacity="0.2"></path>
+        <path d="M192,24H96A16,16,0,0,0,80,40V56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V184.69l19.35,13.82A8,8,0,0,0,208,192V40A16,16,0,0,0,192,24ZM160,208.46l-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96Zm32-32L176,165V72a16,16,0,0,0-16-16H96V40h96Z"></path>
+    </symbol>
+    
+    <symbol id="browsers" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,56V168a8,8,0,0,1-8,8H192V88a8,8,0,0,0-8-8H64V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z" opacity="0.2"></path>
+        <path d="M216,40H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V184h16a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,88H184v16H40ZM184,200H40V120H184v80Zm32-32H200V88a16,16,0,0,0-16-16H72V56H216Z"></path>
+    </symbol>
+    
+    <symbol id="caret-circle-double-up" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M195.88,195.88a96,96,0,1,1,0-135.76A96,96,0,0,1,195.88,195.88Z" opacity="0.2"></path>
+        <path d="M201.54,54.46A104,104,0,0,0,54.46,201.54,104,104,0,0,0,201.54,54.46ZM190.23,190.23a88,88,0,1,1,0-124.46A88.11,88.11,0,0,1,190.23,190.23Zm-24.57-27.89a8,8,0,0,1-11.32,11.32L128,147.31l-26.34,26.35a8,8,0,0,1-11.32-11.32l32-32a8,8,0,0,1,11.32,0Zm0-56a8,8,0,0,1-11.32,11.32L128,91.31l-26.34,26.35a8,8,0,0,1-11.32-11.32l32-32a8,8,0,0,1,11.32,0Z"></path>
+    </symbol>
+    
+    <symbol id="caret-down" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path>
+    </symbol>
+    
+    <symbol id="caret-left" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z"></path>
+    </symbol>
+    
+    <symbol id="caret-right" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"></path>
+    </symbol>
+    
+    <symbol id="chart-bar-horizontal" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,104v48H48V104Z" opacity="0.2"></path>
+        <path d="M224,96H184V56a8,8,0,0,0-8-8H56V40a8,8,0,0,0-16,0V216a8,8,0,0,0,16,0v-8h88a8,8,0,0,0,8-8V160h72a8,8,0,0,0,8-8V104A8,8,0,0,0,224,96ZM168,64V96H56V64ZM136,192H56V160h80Zm80-48H56V112H216Z"></path>
+    </symbol>
+    
+    <symbol id="chart-bar-horizontal-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M232,112v32a8,8,0,0,1-8,8H56v16h88a8,8,0,0,1,8,8v24a8,8,0,0,1-8,8H56v8a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0v8H176a8,8,0,0,1,8,8V80a8,8,0,0,1-8,8H56v16H224A8,8,0,0,1,232,112Z"></path>
+    </symbol>
+    
+    <symbol id="chat-circle-dots" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128A96,96,0,0,1,79.93,211.11h0L42.54,223.58a8,8,0,0,1-10.12-10.12l12.47-37.39h0A96,96,0,1,1,224,128Z" opacity="0.2"></path>
+        <path d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-4-1.08,7.85,7.85,0,0,0-2.53.42L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Zm12-88a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm-44,0a12,12,0,1,1-12-12A12,12,0,0,1,96,128Zm88,0a12,12,0,1,1-12-12A12,12,0,0,1,184,128Z"></path>
+    </symbol>
+    
+    <symbol id="chat-circle-dots-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24ZM84,140a12,12,0,1,1,12-12A12,12,0,0,1,84,140Zm44,0a12,12,0,1,1,12-12A12,12,0,0,1,128,140Zm44,0a12,12,0,1,1,12-12A12,12,0,0,1,172,140Z"></path>
+    </symbol>
+    
+    <symbol id="chat-circle-text" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128A96,96,0,0,1,79.93,211.11h0L42.54,223.58a8,8,0,0,1-10.12-10.12l12.47-37.39h0A96,96,0,1,1,224,128Z" opacity="0.2"></path>
+        <path d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-4-1.08,7.85,7.85,0,0,0-2.53.42L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Zm40-104a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,112Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,144Z"></path>
+    </symbol>
+    
+    <symbol id="check" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path>
+    </symbol>
+    
+    <symbol id="checks" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M149.61,85.71l-89.6,88a8,8,0,0,1-11.22,0L10.39,136a8,8,0,1,1,11.22-11.41L54.4,156.79l84-82.5a8,8,0,1,1,11.22,11.42Zm96.1-11.32a8,8,0,0,0-11.32-.1l-84,82.5-18.83-18.5a8,8,0,0,0-11.21,11.42l24.43,24a8,8,0,0,0,11.22,0l89.6-88A8,8,0,0,0,245.71,74.39Z"></path>
+    </symbol>
+    
+    <symbol id="dot" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z" opacity="0.2"></path>
+        <path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z"></path>
+    </symbol>
+    
+    <symbol id="dots-three-outline" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M152,128a24,24,0,1,1-24-24A24,24,0,0,1,152,128ZM48,104a24,24,0,1,0,24,24A24,24,0,0,0,48,104Zm160,0a24,24,0,1,0,24,24A24,24,0,0,0,208,104Z" opacity="0.2"></path>
+        <path d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144ZM48,96a32,32,0,1,0,32,32A32,32,0,0,0,48,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,48,144ZM208,96a32,32,0,1,0,32,32A32,32,0,0,0,208,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,208,144Z"></path>
+    </symbol>
+    
+    <symbol id="dots-three-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z"></path>
+    </symbol>
+    
+    <symbol id="eraser" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M160,168l-48,48H66.75L36.69,185.94a16,16,0,0,1,0-22.63L96,104Z" opacity="0.2"></path>
+        <path d="M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z"></path>
+    </symbol>
+    
+    <symbol id="eye" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Zm0,112a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z" opacity="0.2"></path>
+        <path d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"></path>
+    </symbol>
+    
+    <symbol id="eye-slash" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Zm0,112a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z" opacity="0.2"></path>
+        <path d="M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z"></path>
+    </symbol>
+    
+    <symbol id="eye-slash-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M96.68,57.87a4,4,0,0,1,2.08-6.6A130.13,130.13,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41a8,8,0,0,1,0,6.5c-.35.79-8.82,19.57-27.65,38.4q-4.28,4.26-8.79,8.07a4,4,0,0,1-5.55-.36ZM213.92,210.62a8,8,0,1,1-11.84,10.76L180,197.13A127.21,127.21,0,0,1,128,208c-34.88,0-66.57-13.26-91.66-38.34C17.51,150.83,9,132.05,8.69,131.26a8,8,0,0,1,0-6.5C9,124,17.51,105.18,36.34,86.35a135,135,0,0,1,25-19.78L42.08,45.38A8,8,0,1,1,53.92,34.62Zm-65.49-48.25-52.69-58a40,40,0,0,0,52.69,58Z"></path>
+    </symbol>
+    
+    <symbol id="eye-closed" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,104c-16.81,20.81-47.63,48-96,48s-79.19-27.19-96-48c16.81-20.81,47.63-48,96-48S207.19,83.19,224,104Z" opacity="0.2"></path>
+        <path d="M228,175a8,8,0,0,1-10.92-3l-19-33.2A123.23,123.23,0,0,1,162,155.46l5.87,35.22a8,8,0,0,1-6.58,9.21A8.4,8.4,0,0,1,160,200a8,8,0,0,1-7.88-6.69l-5.77-34.58a133.06,133.06,0,0,1-36.68,0l-5.77,34.58A8,8,0,0,1,96,200a8.4,8.4,0,0,1-1.32-.11,8,8,0,0,1-6.58-9.21L94,155.46a123.23,123.23,0,0,1-36.06-16.69L39,172A8,8,0,1,1,25.06,164l20-35a153.47,153.47,0,0,1-19.3-20A8,8,0,1,1,38.22,99c16.6,20.54,45.64,45,89.78,45s73.18-24.49,89.78-45A8,8,0,1,1,230.22,109a153.47,153.47,0,0,1-19.3,20l20,35A8,8,0,0,1,228,175Z"></path>
+    </symbol>
+    
+    <symbol id="file-arrow-up" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M208,88H152V32Z" opacity="0.2"></path>
+        <path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-77.66a8,8,0,0,1-11.32,11.32L136,139.31V184a8,8,0,0,1-16,0V139.31l-10.34,10.35a8,8,0,0,1-11.32-11.32l24-24a8,8,0,0,1,11.32,0Z"></path>
+    </symbol>
+    
+    <symbol id="file-arrow-down" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M208,88H152V32Z" opacity="0.2"></path>
+        <path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-61.66a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L120,164.69V120a8,8,0,0,1,16,0v44.69l10.34-10.35A8,8,0,0,1,157.66,154.34Z"></path>
+    </symbol>
+    
+    <symbol id="file-text" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M208,88H152V32Z" opacity="0.2"></path>
+        <path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"></path>
+    </symbol>
+    
+    <symbol id="film-strip" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M32,176H224v24a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8ZM216,48H40a8,8,0,0,0-8,8V80H224V56A8,8,0,0,0,216,48Z" opacity="0.2"></path>
+        <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,88h80v80H40Zm96-16V56h32V72Zm-16,0H88V56h32Zm0,112v16H88V184Zm16,0h32v16H136Zm0-16V88h80v80Zm80-96H184V56h32ZM72,56V72H40V56ZM40,184H72v16H40Zm176,16H184V184h32v16Z"></path>
+    </symbol>
+    
+    <symbol id="frame-corners" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM88,192H56a8,8,0,0,1-8-8V152a8,8,0,0,1,16,0v24H88a8,8,0,0,1,0,16Zm120-88a8,8,0,0,1-16,0V80H168a8,8,0,0,1,0-16h32a8,8,0,0,1,8,8Z"></path>
+    </symbol>
+    
+    <symbol id="gear" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M207.86,123.18l16.78-21a99.14,99.14,0,0,0-10.07-24.29l-26.7-3a81,81,0,0,0-6.81-6.81l-3-26.71a99.43,99.43,0,0,0-24.3-10l-21,16.77a81.59,81.59,0,0,0-9.64,0l-21-16.78A99.14,99.14,0,0,0,77.91,41.43l-3,26.7a81,81,0,0,0-6.81,6.81l-26.71,3a99.43,99.43,0,0,0-10,24.3l16.77,21a81.59,81.59,0,0,0,0,9.64l-16.78,21a99.14,99.14,0,0,0,10.07,24.29l26.7,3a81,81,0,0,0,6.81,6.81l3,26.71a99.43,99.43,0,0,0,24.3,10l21-16.77a81.59,81.59,0,0,0,9.64,0l21,16.78a99.14,99.14,0,0,0,24.29-10.07l3-26.7a81,81,0,0,0,6.81-6.81l26.71-3a99.43,99.43,0,0,0,10-24.3l-16.77-21A81.59,81.59,0,0,0,207.86,123.18ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z" opacity="0.2"></path>
+        <path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.6,107.6,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.29,107.29,0,0,0-26.25-10.86,8,8,0,0,0-7.06,1.48L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.6,107.6,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8.06,8.06,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8.06,8.06,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"></path>
+    </symbol>
+    
+    <symbol id="hashtag" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M165.82,96l-11.64,64h-64l11.64-64Z" opacity="0.2"></path>
+        <path d="M224,88H175.4l8.47-46.57a8,8,0,0,0-15.74-2.86l-9,49.43H111.4l8.47-46.57a8,8,0,0,0-15.74-2.86L95.14,88H48a8,8,0,0,0,0,16H92.23L83.5,152H32a8,8,0,0,0,0,16H80.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,80,224a8,8,0,0,0,7.86-6.57l9-49.43H144.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,144,224a8,8,0,0,0,7.86-6.57l9-49.43H208a8,8,0,0,0,0-16H163.77l8.73-48H224a8,8,0,0,0,0-16Zm-76.5,64H99.77l8.73-48h47.73Z"></path>
+    </symbol>
+    
+    <symbol id="hourglass" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M188.82,82,128,128,67.2,82.4A8,8,0,0,1,64,76V40a8,8,0,0,1,8-8H184a8,8,0,0,1,8,8V75.64A8,8,0,0,1,188.82,82ZM64,180v36a8,8,0,0,0,8,8H184a8,8,0,0,0,8-8V180.36a8,8,0,0,0-3.18-6.38L128,128,67.2,173.6A8,8,0,0,0,64,180Z" opacity="0.2"></path>
+        <path d="M200,75.64V40a16,16,0,0,0-16-16H72A16,16,0,0,0,56,40V76a16.07,16.07,0,0,0,6.4,12.8L114.67,128,62.4,167.2A16.07,16.07,0,0,0,56,180v36a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V180.36a16.09,16.09,0,0,0-6.35-12.77L141.27,128l52.38-39.59A16.09,16.09,0,0,0,200,75.64ZM184,216H72V180l56-42,56,42.35Zm0-140.36L128,118,72,76V40H184Z"></path>
+    </symbol>
+
+    <symbol id="house-line" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,116.69V216H152V152H104v64H40V116.69l82.34-82.35a8,8,0,0,1,11.32,0Z" opacity="0.2"></path>
+        <path d="M240,208H224V136l2.34,2.34A8,8,0,0,0,237.66,127L139.31,28.68a16,16,0,0,0-22.62,0L18.34,127a8,8,0,0,0,11.32,11.31L32,136v72H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM48,120l80-80,80,80v88H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48Zm96,88H112V160h32Z"></path>
+    </symbol>
+
+    <symbol id="house-line-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M240,208H224V136l2.34,2.34A8,8,0,0,0,237.66,127L139.31,28.68a16,16,0,0,0-22.62,0L18.34,127a8,8,0,0,0,11.32,11.31L32,136v72H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16Zm-88,0H104V160a4,4,0,0,1,4-4h40a4,4,0,0,1,4,4Z"></path>
+    </symbol>
+    
+    <symbol id="image" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,56V178.06l-39.72-39.72a8,8,0,0,0-11.31,0L147.31,164,97.66,114.34a8,8,0,0,0-11.32,0L32,168.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z" opacity="0.2"></path>
+        <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"></path>
+    </symbol>
+    
+    <symbol id="info" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path>
+        <path d="M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z"></path>
+    </symbol>
+    
+    <symbol id="keyboard" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M232,64V192a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H224A8,8,0,0,1,232,64Z" opacity="0.2"></path>
+        <path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z"></path>
+    </symbol>
+    
+    <symbol id="leaf" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M223.45,40.07a8,8,0,0,0-7.52-7.52C139.8,28.08,78.82,51,52.82,94a87.09,87.09,0,0,0-12.76,49c.57,15.92,5.21,32,13.79,47.85l-19.51,19.5a8,8,0,0,0,11.32,11.32l19.5-19.51C81,210.73,97.09,215.37,113,215.94q1.67.06,3.33.06A86.93,86.93,0,0,0,162,203.18C205,177.18,227.93,116.21,223.45,40.07ZM153.75,189.5c-22.75,13.78-49.68,14-76.71.77l88.63-88.62a8,8,0,0,0-11.32-11.32L65.73,179c-13.19-27-13-54,.77-76.71,22.09-36.47,74.6-56.44,141.31-54.06C210.2,114.89,190.22,167.41,153.75,189.5Z"></path>
+    </symbol>
+    
+    <symbol id="link" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M218.34,119.6,183.6,154.34a46.58,46.58,0,0,1-44.31,12.26c-.31.34-.62.67-.95,1L103.6,202.34A46.63,46.63,0,1,1,37.66,136.4L72.4,101.66A46.6,46.6,0,0,1,116.71,89.4c.31-.34.62-.67,1-1L152.4,53.66a46.63,46.63,0,0,1,65.94,65.94Z" opacity="0.2"></path>
+        <path d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,7.78,8.22H152a8,8,0,0,0,8-7.78A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"></path>
+    </symbol>
+    
+    <symbol id="list" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,64V192H40V64Z" opacity="0.2"></path>
+        <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path>
+    </symbol>
+    
+    <symbol id="list-plus" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,64V192H40V64Z" opacity="0.2"></path>
+        <path d="M32,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H40A8,8,0,0,1,32,64Zm8,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Zm104,48H40a8,8,0,0,0,0,16H144a8,8,0,0,0,0-16Zm88,0H216V168a8,8,0,0,0-16,0v16H184a8,8,0,0,0,0,16h16v16a8,8,0,0,0,16,0V200h16a8,8,0,0,0,0-16Z"></path>
+    </symbol>
+    
+    <symbol id="lock-simple" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,96V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8H208A8,8,0,0,1,216,96Z" opacity="0.2"></path>
+        <path d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z"></path>
+    </symbol>
+    
+    <symbol id="lock-open-simple" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,96V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8H208A8,8,0,0,1,216,96Z" opacity="0.2"></path>
+        <path d="M48,8 C74.509668,8 96,29.490332 96,56 L95.9994315,80 L208,80 C216.836556,80 224,87.163444 224,96 L224,208 C224,216.836556 216.836556,224 208,224 L48,224 C39.163444,224 32,216.836556 32,208 L32,96 C32,87.163444 39.163444,80 48,80 L79.9994315,80 L80,56 C80,38.5036191 65.9582171,24.2868724 48.5291785,24.0042871 L48,24 C32.5086083,24 18.8027209,35.0099629 15.83982,49.592866 C14.9601045,53.922679 10.7369471,56.7195356 6.40713405,55.83982 C2.077321,54.9601045 -0.719535601,50.7369471 0.160179973,46.407134 C4.64934606,24.3122088 24.9557992,8 48,8 Z M208,96 L48,96 L48,208 L208,208 L208,96 Z"/>
+    </symbol>
+    
+    <symbol id="magnifying-glass" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z" opacity="0.2"></path>
+        <path d="M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
+    </symbol>
+    
+    <symbol id="mailbox" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M232,116v60a8,8,0,0,1-8,8H128V116A52,52,0,0,0,76,64H180A52,52,0,0,1,232,116Z" opacity="0.2"></path>
+        <path d="M104,152a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H96A8,8,0,0,1,104,152Zm136-36v60a16,16,0,0,1-16,16H136v32a8,8,0,0,1-16,0V192H32a16,16,0,0,1-16-16V116A60.07,60.07,0,0,1,76,56h76V24a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H168V56h12A60.07,60.07,0,0,1,240,116ZM120,176V116a44,44,0,0,0-88,0v60Zm104-60a44.05,44.05,0,0,0-44-44H168v72a8,8,0,0,1-16,0V72H116.75A59.86,59.86,0,0,1,136,116v60h88Z"></path>
+    </symbol>
+    
+    <symbol id="markdown-logo" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M240,64V192a8,8,0,0,1-8,8H24a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H232A8,8,0,0,1,240,64Z" opacity="0.2"></path>
+        <path d="M232,48H24A16,16,0,0,0,8,64V192a16,16,0,0,0,16,16H232a16,16,0,0,0,16-16V64A16,16,0,0,0,232,48Zm0,144H24V64H232V192ZM128,104v48a8,8,0,0,1-16,0V123.31L93.66,141.66a8,8,0,0,1-11.32,0L64,123.31V152a8,8,0,0,1-16,0V104a8,8,0,0,1,13.66-5.66L88,124.69l26.34-26.35A8,8,0,0,1,128,104Zm77.66,18.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L168,132.69V104a8,8,0,0,1,16,0v28.69l10.34-10.35A8,8,0,0,1,205.66,122.34Z"></path>
+    </symbol>
+    
+    <symbol id="megaphone-simple" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M144,69.09V170.91L50.24,199.67A8,8,0,0,1,40,192V48a8,8,0,0,1,10.24-7.67Z" opacity="0.2"></path>
+        <path d="M228.54,86.66l-176.06-54A16,16,0,0,0,32,48V192a16,16,0,0,0,16,16,16,16,0,0,0,4.52-.65L136,181.73V192a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16v-29.9l28.54-8.75A16.09,16.09,0,0,0,240,138V102A16.09,16.09,0,0,0,228.54,86.66ZM136,165,48,192V48l88,27Zm48,27H152V176.82L184,167Zm40-54-.11,0L152,160.08V79.92l71.89,22,.11,0v36Z"></path>
+    </symbol>
+    
+    <symbol id="moon" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M227.89,147.89A96,96,0,1,1,108.11,28.11,96.09,96.09,0,0,0,227.89,147.89Z" opacity="0.2"></path>
+        <path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"></path>
+    </symbol>
+    
+    <symbol id="music-note" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M128,184a40,40,0,1,1-40-40A40,40,0,0,1,128,184Z" opacity="0.2"></path>
+        <path d="M210.3,56.34l-80-24A8,8,0,0,0,120,40V148.26A48,48,0,1,0,136,184V98.75l69.7,20.91A8,8,0,0,0,216,112V64A8,8,0,0,0,210.3,56.34ZM88,216a32,32,0,1,1,32-32A32,32,0,0,1,88,216ZM200,101.25l-64-19.2V50.75L200,70Z"></path>
+    </symbol>
+    
+    <symbol id="music-notes" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M208,164a28,28,0,1,1-28-28A28,28,0,0,1,208,164ZM52,168a28,28,0,1,0,28,28A28,28,0,0,0,52,168Z" opacity="0.2"></path>
+        <path d="M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z"></path>
+    </symbol>
+    
+    <symbol id="network-slash" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M88,176v32a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V176a8,8,0,0,1,8-8H80A8,8,0,0,1,88,176ZM144,32H112a8,8,0,0,0-8,8V72a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V40A8,8,0,0,0,144,32Z" opacity="0.2"></path>
+        <path d="M96,54V40a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V72a16,16,0,0,1-16,16H127.61a8,8,0,0,1,0-16H144V40H112V54a8,8,0,0,1-16,0ZM213.92,210.62a8,8,0,1,1-11.84,10.76L117.19,128H72v32h8a16,16,0,0,1,16,16v32a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V176a16,16,0,0,1,16-16h8V128H24a8,8,0,0,1,0-16h78.64L42.08,45.38A8,8,0,1,1,53.92,34.62ZM80,176H48v32H80Zm152-64H164a8,8,0,0,0,0,16h20v22.83a8,8,0,1,0,16,0V128h32a8,8,0,0,0,0-16Z"></path>
+    </symbol>
+    
+    <symbol id="paper-plane-tilt" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14,0-.07-40.06-82.3,48-48a8,8,0,0,0-11.31-11.31l-48,48L24.08,98.25l-.07,0,.14,0L216,40Z"></path>
+    </symbol>
+    
+    <symbol id="paperclip"  fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M180.75,104.75,204,128l-82.06,81.94a48,48,0,0,1-67.88-67.88L153.37,41.37a32,32,0,0,1,45.26,45.26Z" opacity="0.2"></path>
+        <path d="M209.66,122.34a8,8,0,0,1,0,11.32l-82.05,82a56,56,0,0,1-79.2-79.21L147.67,35.73a40,40,0,1,1,56.61,56.55L105,193A24,24,0,1,1,71,159L154.3,74.38A8,8,0,1,1,165.7,85.6L82.39,170.31a8,8,0,1,0,11.27,11.36L192.93,81A24,24,0,1,0,159,47L59.76,147.68a40,40,0,1,0,56.53,56.62l82.06-82A8,8,0,0,1,209.66,122.34Z"></path>
+    </symbol>
+    
+    <symbol id="paint-brush" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,32c0,32.81-31.64,67.43-58.64,91.05A84.39,84.39,0,0,0,133,90.64C156.57,63.64,191.19,32,224,32Z" opacity="0.2"></path>
+        <path d="M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z"></path>
+    </symbol>
+    
+    <symbol id="paint-bucket" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M248,208a16,16,0,0,1-32,0c0-16,16-40,16-40S248,192,248,208Zm-16-76.52-24,8-79.83,79.83a16,16,0,0,1-22.63,0L20.69,134.46a16,16,0,0,1,0-22.63L116.52,16Zm-93.86-29.62a20,20,0,1,0,0,28.28A20,20,0,0,0,138.14,101.86Z" opacity="0.2"></path>
+        <path d="M238.66,163.56a8,8,0,0,0-13.32,0C223.57,166.23,208,190.09,208,208a24,24,0,0,0,48,0C256,190.09,240.43,166.23,238.66,163.56ZM232,216a8,8,0,0,1-8-8c0-6.8,4-16.32,8-24.08,4,7.76,8,17.34,8,24.08A8,8,0,0,1,232,216Zm2.53-76.93a8,8,0,0,0,3.13-13.24L122.17,10.34a8,8,0,0,0-11.31,0L70.25,51,45.65,26.34A8,8,0,0,0,34.34,37.66l24.6,24.6L15,106.17a24,24,0,0,0,0,33.94L99.89,225a24,24,0,0,0,33.94,0l78.49-78.49Zm-32.19-5.24-79.83,79.83a8,8,0,0,1-11.31,0L26.34,128.8a8,8,0,0,1,0-11.31L70.25,73.57l29.12,29.12a28,28,0,1,0,11.31-11.32L81.57,62.26l35-34.95L217.19,128l-11.72,3.9A8.09,8.09,0,0,0,202.34,133.83Zm-86.83-26.31,0,0a13.26,13.26,0,1,1-.05.06S115.51,107.53,115.51,107.52Z"></path>
+    </symbol>
+    
+    <symbol id="pause" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z"></path>
+    </symbol>
+    
+    <symbol id="pencil-simple-line" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M221.66,90.34,192,120,136,64l29.66-29.66a8,8,0,0,1,11.31,0L221.66,79A8,8,0,0,1,221.66,90.34Z" opacity="0.2"></path>
+        <path d="M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H216a8,8,0,0,0,0-16H115.32l112-112A16,16,0,0,0,227.32,73.37ZM48,163.31l88-88L180.69,120l-88,88H48Zm144-54.62L147.32,64l24-24L216,84.69Z"></path>
+    </symbol>
+    
+    <symbol id="planet" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z" opacity="0.2"></path>
+        <path d="M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z"></path>
+    </symbol>
+    
+    <symbol id="play" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z"></path>
+    </symbol>
+    
+    <symbol id="plus" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path>
+    </symbol>
+    
+    <symbol id="prohibit" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path>
+        <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm88,104a87.56,87.56,0,0,1-20.41,56.28L71.72,60.4A88,88,0,0,1,216,128ZM40,128A87.56,87.56,0,0,1,60.41,71.72L184.28,195.6A88,88,0,0,1,40,128Z"></path>
+    </symbol>
+    
+    <symbol id="push-pin" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M229.66,98.34,172.39,155.8c11.46,22.93-1.72,45.86-10.11,57a8,8,0,0,1-12,.83L42.34,105.76A8,8,0,0,1,43,93.85c29.65-23.92,57.4-10,57.4-10l57.27-57.46a8,8,0,0,1,11.31,0L229.66,87A8,8,0,0,1,229.66,98.34Z" opacity="0.2"></path>
+        <path d="M235.32,81.37,174.63,20.69a16,16,0,0,0-22.63,0L98.37,74.49c-10.66-3.34-35-7.37-60.4,13.14a16,16,0,0,0-1.29,23.78L85,159.71,42.34,202.34a8,8,0,0,0,11.32,11.32L96.29,171l48.29,48.29A16,16,0,0,0,155.9,224c.38,0,.75,0,1.13,0a15.93,15.93,0,0,0,11.64-6.33c19.64-26.1,17.75-47.32,13.19-60L235.33,104A16,16,0,0,0,235.32,81.37ZM224,92.69h0l-57.27,57.46a8,8,0,0,0-1.49,9.22c9.46,18.93-1.8,38.59-9.34,48.62L48,100.08c12.08-9.74,23.64-12.31,32.48-12.31A40.13,40.13,0,0,1,96.81,91a8,8,0,0,0,9.25-1.51L163.32,32,224,92.68Z"></path>
+    </symbol>
+    
+    <symbol id="push-pin-slash" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M229.66,98.34,172.39,155.8c11.46,22.93-1.72,45.86-10.11,57a8,8,0,0,1-12,.83L42.34,105.76A8,8,0,0,1,43,93.85c29.65-23.92,57.4-10,57.4-10l57.27-57.46a8,8,0,0,1,11.31,0L229.66,87A8,8,0,0,1,229.66,98.34Z" opacity="0.2"></path>
+        <path d="M53.92,34.62A8,8,0,1,0,42.08,45.38L67.37,73.2A69.82,69.82,0,0,0,38,87.63a16,16,0,0,0-1.29,23.78L85,159.71,42.34,202.34a8,8,0,0,0,11.32,11.32L96.29,171l48.29,48.29A16,16,0,0,0,155.9,224c.38,0,.75,0,1.13,0a15.93,15.93,0,0,0,11.64-6.33,89.75,89.75,0,0,0,11.58-20.27l21.84,24a8,8,0,1,0,11.84-10.76ZM155.9,208,48,100.08C58.23,91.83,69.2,87.72,80.66,87.81l87.16,95.88C165.59,193.56,160.24,202.23,155.9,208Zm79.42-104-44.64,44.79a8,8,0,1,1-11.33-11.3L224,92.7,163.32,32,122.1,73.35a8,8,0,0,1-11.33-11.29L152,20.7a16,16,0,0,1,22.63,0l60.69,60.68A16,16,0,0,1,235.32,104Z"></path>
+    </symbol>
+    
+    <symbol id="rocket-launch" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M184,120v61.65a8,8,0,0,1-2.34,5.65l-34.35,34.35a8,8,0,0,1-13.57-4.53L128,176ZM136,72H74.35a8,8,0,0,0-5.65,2.34L34.35,108.69a8,8,0,0,0,4.53,13.57L80,128ZM40,216c37.65,0,50.69-19.69,54.56-28.18L68.18,161.44C59.69,165.31,40,178.35,40,216Z" opacity="0.2"></path>
+        <path d="M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z"></path>
+    </symbol>
+    
+    <symbol id="rocket-launch-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M101.85,191.14C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Zm122-144a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.4,27.07h0L88,108.7A8,8,0,0,1,76.67,97.39l26.56-26.57A4,4,0,0,0,100.41,64H74.35A15.9,15.9,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A16,16,0,0,0,192,181.65V155.59a4,4,0,0,0-6.83-2.82l-26.57,26.56a8,8,0,0,1-11.71-.42,8.2,8.2,0,0,1,.6-11.1l49.27-49.27h0C223.45,91.86,224.6,59.71,223.85,47.12Z"></path>
+    </symbol>
+
+    <symbol id="sign-out" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,56V200a16,16,0,0,1-16,16H48V40H208A16,16,0,0,1,224,56Z" opacity="0.2"></path>
+        <path d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z"></path>
+    </symbol>
+    
+    <symbol id="signpost" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M240,112l-33.62,37.35a8,8,0,0,1-5.94,2.65H40a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H200.44a8,8,0,0,1,5.94,2.65Z" opacity="0.2"></path>
+        <path d="M246,106.65,212.33,69.3A16,16,0,0,0,200.44,64H136V32a8,8,0,0,0-16,0V64H40A16,16,0,0,0,24,80v64a16,16,0,0,0,16,16h80v64a8,8,0,0,0,16,0V160h64.44a16,16,0,0,0,11.89-5.3L246,117.35A8,8,0,0,0,246,106.65ZM200.44,144H40V80H200.44l28.8,32Z"></path>
+    </symbol>
+    
+    <symbol id="slider-horizontal" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M128,80a24,24,0,1,1-24-24A24,24,0,0,1,128,80Zm40,72a24,24,0,1,0,24,24A24,24,0,0,0,168,152Z" opacity="0.2"></path>
+        <path d="M40,88H73a32,32,0,0,0,62,0h81a8,8,0,0,0,0-16H135a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16Zm64-24A16,16,0,1,1,88,80,16,16,0,0,1,104,64ZM216,168H199a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16h97a32,32,0,0,0,62,0h17a8,8,0,0,0,0-16Zm-48,24a16,16,0,1,1,16-16A16,16,0,0,1,168,192Z"></path>
+    </symbol>
+    
+    <symbol id="smiley" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path>
+        <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.08,48c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8Z"></path>
+    </symbol>
+    
+    <symbol id="speaker-high" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M160,32.25V223.69a8.29,8.29,0,0,1-3.91,7.18,8,8,0,0,1-9-.56l-65.57-51A4,4,0,0,1,80,176.16V79.84a4,4,0,0,1,1.55-3.15l65.57-51a8,8,0,0,1,10,.16A8.27,8.27,0,0,1,160,32.25ZM60,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H60a4,4,0,0,0,4-4V84A4,4,0,0,0,60,80Zm126.77,20.84a8,8,0,0,0-.72,11.3,24,24,0,0,1,0,31.72,8,8,0,1,0,12,10.58,40,40,0,0,0,0-52.88A8,8,0,0,0,186.74,100.84Zm40.89-26.17a8,8,0,1,0-11.92,10.66,64,64,0,0,1,0,85.34,8,8,0,1,0,11.92,10.66,80,80,0,0,0,0-106.66Z"></path>
+    </symbol>
+    
+    <symbol id="speaker-slash" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M213.92,210.62a8,8,0,1,1-11.84,10.76L160,175.09v48.6a8.29,8.29,0,0,1-3.91,7.18,8,8,0,0,1-9-.56l-65.55-51A4,4,0,0,1,80,176.18V87.09L42.08,45.38A8,8,0,1,1,53.92,34.62Zm-27.21-55.46a8,8,0,0,0,11.29-.7,40,40,0,0,0,0-52.88,8,8,0,1,0-12,10.57,24,24,0,0,1,0,31.72A8,8,0,0,0,186.71,155.16Zm40.92-80.49a8,8,0,1,0-11.92,10.66,64,64,0,0,1,0,85.34,8,8,0,1,0,11.92,10.66,80,80,0,0,0,0-106.66ZM153,119.87a4,4,0,0,0,7-2.7V32.25a8.27,8.27,0,0,0-2.88-6.4,8,8,0,0,0-10-.16L103.83,59.33a4,4,0,0,0-.5,5.85ZM60,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H60a4,4,0,0,0,4-4V84A4,4,0,0,0,60,80Z"></path>
+    </symbol>
+    
+    <symbol id="speaker-simple-x" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M160,32V224L88,168H40a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8H88Z" opacity="0.2"></path>
+        <path d="M163.51,24.81a8,8,0,0,0-8.42.88L85.25,80H40A16,16,0,0,0,24,96v64a16,16,0,0,0,16,16H85.25l69.84,54.31A8,8,0,0,0,168,224V32A8,8,0,0,0,163.51,24.81ZM152,207.64,92.91,161.69A7.94,7.94,0,0,0,88,160H40V96H88a7.94,7.94,0,0,0,4.91-1.69L152,48.36Zm101.66-61.3a8,8,0,0,1-11.32,11.32L224,139.31l-18.34,18.35a8,8,0,0,1-11.32-11.32L212.69,128l-18.35-18.34a8,8,0,0,1,11.32-11.32L224,116.69l18.34-18.35a8,8,0,0,1,11.32,11.32L235.31,128Z"></path>
+    </symbol>
+
+    <symbol id="star" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z" opacity="0.2"></path>
+        <path d="M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z"></path>
+    </symbol>
+
+    <symbol id="star-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path>
+    </symbol>
+    
+    <symbol id="trash" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56Z" opacity="0.2"></path>
+        <path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path>
+    </symbol>
+    
+    <symbol id="user-circle" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128a95.76,95.76,0,0,1-31.8,71.37A72,72,0,0,0,128,160a40,40,0,1,0-40-40,40,40,0,0,0,40,40,72,72,0,0,0-64.2,39.37h0A96,96,0,1,1,224,128Z" opacity="0.2"></path>
+        <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"></path>
+    </symbol>
+
+    <symbol id="user-minus" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z" opacity="0.2"></path>
+        <path d="M256,136a8,8,0,0,1-8,8H200a8,8,0,0,1,0-16h48A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z"></path>
+    </symbol>
+
+    <symbol id="user-plus" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z" opacity="0.2"></path>
+        <path d="M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z"></path>
+    </symbol>
+
+    <symbol id="user-plus-filled" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z"></path>
+    </symbol>
+    
+    <symbol id="users" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M136,108A52,52,0,1,1,84,56,52,52,0,0,1,136,108Z" opacity="0.2"></path>
+        <path d="M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z"></path>
+    </symbol>
+    
+    <symbol id="warning" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z" opacity="0.2"></path>
+        <path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path>
+    </symbol>
+
+    <symbol id="x" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+    </symbol>
+    
+    <symbol id="x-circle" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path>
+        <path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
+    </symbol>
+</svg>
\ No newline at end of file
diff --git a/stylelint.config.js b/stylelint.config.js
index a1044ebf2..ed645fd6c 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -15,9 +15,18 @@ module.exports = {
   reportInvalidScopeDisables: true,
   reportNeedlessDisables: true,
   rules: {
+    "alpha-value-notation": "number",
     "at-rule-empty-line-before": null,
     "color-function-notation": null,
     "color-hex-length": null,
+    "custom-property-empty-line-before": ["always", {
+      "except": [
+        "after-custom-property",
+        "first-nested",
+        "after-comment",
+      ],
+    }],
+    "custom-property-pattern": "(([a-z]+)(-[a-z]+)*([-]{2}[a-z]+(-[a-z]+)?)?)", // allows kebab-case and kebab-case--state
     "declaration-block-no-redundant-longhand-properties": null,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
@@ -27,7 +36,6 @@ module.exports = {
     "selector-id-pattern": null,
     "value-keyword-case": null,
     "value-no-vendor-prefix": null,
-
     "scss/dollar-variable-empty-line-before": null,
     "scss/no-global-function-names": null,
   },