[feature] start rewriting css from scratch

commit a35874f6456efcdccc4d8439518094de0002ab11
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 09:26:04 2025 +0200

    [chore] remove singleQuote options from prettierrc

    These default to false, which is inline with the changes made in #88 / 1ff70886a1

.editorconfig

@@ -3,5 +3,5 @@ root = true
 [*.scss]
 indent_size = 2
 
-[login.scss]
+[{**/login.scss,**/tangerine/**/*.scss,**/gts/**/*.scss,app/css/**/*.css}]
 indent_size = 4

.prettierrc.js

@@ -1,4 +1,2 @@
 module.exports = {
-  singleQuote: true,
-  jsxSingleQuote: true,
 };

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
 

app/css/core/_core.css

@@ -0,0 +1,101 @@
+@import "colors";
+@import "columns";
+@import "scrollbars";
+@import "sizes";
+
+@import "multiple-columns";
+
+@import "components/drawer";
+@import "components/search";
+@import "components/column";
+@import "components/notification-filter-bar";
+@import "components/status/status";
+
+@import "modules/feed";
+@import "modules/status";
+
+@font-face {
+    font-family: "Manrope";
+    src: url("Manrope[wght].woff2") format("woff2-variations");
+}
+
+* {
+    box-sizing: border-box;
+
+    &::before,
+    &::after {
+        box-sizing: inherit;
+    }
+}
+
+body {
+    margin: 0;
+    font-family: "Manrope", ui-rounded, sans-serif;
+    color: var(--color-fg);
+    line-height: 1.5;
+    text-rendering: optimizelegibility;
+    background: var(--color-bg);
+}
+
+.ui {
+    width: 100%;
+    height: 100%;
+}
+
+button {
+    display: block;
+    padding: 6px;
+    border: 1px solid transparent;
+    color: var(--color-content-fg);
+    font: inherit;
+    line-height: inherit;
+    border-radius: 6px;
+    background-color: var(--color-content-secondary-bg);
+
+    &:is(:active, :focus, :hover) {
+        color: var(--color-accent);
+        background-color: var(--color-accent-bg);
+    }
+
+    &:focus-visible {
+        outline: solid 2px var(--color-accent-focus);
+        outline-offset: 2px;
+    }
+}
+
+button:has(svg) {
+    display: flex;
+    align-items: center;
+}
+
+img {
+    max-width: 100px;
+}
+
+svg.gts-icon {
+    display: block;
+    width: var(--size-icon);
+    height: var(--size-icon);
+}
+
+.compose-form__buttons {
+    display: flex;
+    gap: 5px;
+}
+
+.emojione {
+    --size: min(1em, 20px);
+
+    width: var(--size);
+    height: var(--size);
+}
+
+.ui__header,
+.search__popout,
+.drawer__inner__mastodon {
+    display: none;
+}
+
+.upload-area {
+    position: fixed;
+}

app/css/core/colors.css

@@ -0,0 +1,39 @@
+/* 🎨 Colors */
+:root {
+    color-scheme: light dark;
+
+    --color-bg: #f2eff5;
+    --gradient-bg: linear-gradient(90deg, var(--color-bg), var(--color-bg));
+    --color-fg: #2a2d37;
+    --color-fg-muted: #888494;
+    --color-secondary-bg: #e8e4f2;
+    --color-secondary-separator: #dfdbed;
+
+    --color-content-bg: #ffffff;
+    --color-content-fg: #444a5a;
+    --color-content-fg-bold: #000000;
+    --color-content-fg-muted: color-mix(
+        in srgb,
+        var(--color-content-fg),
+        var(--color-content-bg) 40%
+    );
+    --color-content-secondary-bg: #f5f4f9;
+    --color-content-secondary-separator: rgba(223, 219, 237, 0.4);
+    --color-content-bg-focus: #fffcfa;
+
+    --color-accent: #5758ff;
+    --color-accent-focus: #563acc;
+    --color-accent-lines: rgba(99, 100, 255, 0.12);
+    --color-accent-bg: #e5ddf6;
+    --color-accent-fg: #ffffff;
+
+    --color-lines: #e1dde4;
+    --color-lines-translucent: rgba(0, 0, 0, 0.15);
+
+    --color-confirm: #79bd9a;
+    --color-confirm-bg: rgba(121, 189, 154, 0.3);
+    --color-confirm-fg: #4e8a6b;
+
+    --color-reject: #df405a;
+    --color-reject-bg: rgba(223, 64, 90, 0.3);
+}

app/css/core/columns.css

@@ -0,0 +1,24 @@
+.columns-area {
+    display: flex;
+    padding: var(--size-layout-gap);
+    column-gap: var(--size-layout-gap);
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    overflow: hidden;
+    border: 1px solid var(--color-lines);
+    border-radius: var(--size-layout-radius);
+    background: var(--color-content-bg);
+
+    .layout-multiple-columns & {
+        width: 400px;
+    }
+}
+
+.column > .scrollable {
+    max-height: 100%;
+    overflow-y: scroll;
+}

app/css/core/components/column.css

@@ -0,0 +1 @@
+@import "components/column/column-header";

app/css/core/components/column/column-header.css

@@ -0,0 +1,32 @@
+.column-header {
+    display: flex;
+    margin: 0;
+    font-size: max(16px, 1rem);
+    font-weight: bold;
+    backdrop-filter: blur(20px);
+}
+
+.column-header > button {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    gap: 15px;
+    padding-inline-start: 15px;
+    color: var(--color-content-fg);
+    background: var(--color-content-bg);
+
+    &:hover {
+        color: inherit;
+        background-color: transparent;
+    }
+}
+
+.column-header__buttons {
+    display: flex;
+    gap: var(--size-ui-gap);
+    padding: 5px;
+
+    > button {
+        background-color: transparent;
+    }
+}

app/css/core/components/drawer.css

@@ -0,0 +1,33 @@
+.drawer {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--size-layout-gap);
+    min-width: 300px;
+    max-width: 400px;
+}
+
+.drawer__header {
+    display: flex;
+    column-gap: var(--size-ui-gap);
+    padding: 5px;
+    border: 1px solid var(--color-lines);
+    border-radius: var(--size-layout-radius);
+    background: var(--color-content-bg);
+}
+
+.drawer__header a {
+    --size-icon: 24px;
+
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: center;
+    padding: 8px;
+    border-radius: var(--size-ui-radius);
+    color: inherit;
+    transition: all 0.3s;
+
+    &:is(:active, :focus, :hover) {
+        background-color: var(--color-accent-bg);
+    }
+}

app/css/core/components/notification-filter-bar.css

@@ -0,0 +1,66 @@
+.notification__filter-bar {
+    display: flex;
+}
+
+.notification__filter-bar {
+    display: flex;
+    gap: 8px;
+    margin-inline: -1px;
+    padding: 6px;
+    border: 1px solid var(--color-accent-lines);
+    background: var(--color-accent-bg);
+
+    a,
+    button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-grow: 1;
+        padding: 8px 6px;
+        min-width: 32px;
+        border: 0;
+        border-radius: var(--size-ui-radius);
+        color: var(--color-content-fg);
+        line-height: 20px;
+        text-decoration: none;
+        background: transparent;
+        transition: all 0.3s;
+
+        &:focus-visible,
+        &:hover {
+            background: var(--color-accent-lines);
+        }
+    }
+
+    a.active,
+    button.active {
+        color: var(--color-content-fg);
+        background: var(--color-content-bg);
+
+        /* &:focus-visible,
+        &:hover {
+            background: var(--color-notifications-bg--hover);
+        } */
+    }
+
+    a:not(:first-child),
+    button:not(:first-child) {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            top: 6px;
+            right: calc(100% + 3px);
+            width: 2px;
+            height: 24px;
+            background: var(--color-accent-lines);
+            content: "";
+        }
+    }
+
+    svg.gts-icon {
+        --size: 20px;
+
+        display: block;
+    }
+}

app/css/core/components/search.css

@@ -0,0 +1,50 @@
+/* 🔍 Search */
+.search {
+    position: relative;
+    display: flex;
+}
+
+.search > input {
+    display: block;
+    padding: 12px 40px;
+    width: 100%;
+    border: 1px solid var(--color-accent-lines);
+    border-radius: var(--size-layout-radius);
+    color: var(--color-content-fg);
+    font: inherit;
+    font-weight: 500;
+    line-height: 20px;
+    background: var(--color-accent-bg);
+    transition: 0.2s;
+    transition-property: border-color, background-color, outline;
+
+    &::placeholder {
+        font-weight: 500;
+        color: var(--color-accent);
+    }
+
+    &:focus::placeholder {
+        color: var(--color-content-fg);
+        opacity: 0.4;
+    }
+}
+
+.search > .gts-icon {
+    --size-icon: 20px;
+
+    position: absolute;
+    top: 13px;
+    left: 13px;
+}
+
+.search > button {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+    padding: 6px;
+    background: transparent;
+
+    &:not(.active) {
+        display: none;
+    }
+}

app/css/core/components/status/_status.css

@@ -0,0 +1,10 @@
+/* 🚥 Status */
+@import "components/status/account";
+@import "components/status/action-bar";
+@import "components/status/avatar";
+@import "components/status/container";
+@import "components/status/content";
+@import "components/status/display-name";
+@import "components/status/icons";
+@import "components/status/info";
+@import "components/status/prepend";

app/css/core/components/status/account.css

@@ -0,0 +1,8 @@
+/* 🚥 Status: Account */
+.status__info__account {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 10px;
+    overflow: hidden;
+    text-overflow: clip;
+}

app/css/core/components/status/action-bar.css

@@ -0,0 +1,16 @@
+/* 🚥 Status: Action bar */
+.status__action-bar {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    button {
+        color: var(--color-accent);
+        background-color: transparent;
+    }
+}
+
+.status__relative-time {
+    margin-left: auto;
+    color: var(--color-content-fg);
+}

app/css/core/components/status/avatar.css

@@ -0,0 +1,38 @@
+/* 🚥 Status: Avatar */
+.status__avatar {
+}
+
+.status {
+    .account__avatar {
+        border-radius: var(--size-ui-radius);
+    }
+
+    .account__avatar-overlay {
+        position: relative;
+        padding-block-end: 10px;
+        padding-inline-end: 10px;
+    }
+
+    .account__avatar-overlay-base,
+    .account__avatar-overlay-overlay {
+        display: block;
+        width: var(--size-avatar);
+        height: var(--size-avatar);
+        border-radius: var(--size-ui-radius);
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+
+    .account__avatar-overlay-base {
+        --size-avatar: 36px;
+    }
+
+    .account__avatar-overlay-overlay {
+        --size-avatar: 24px;
+
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+}

app/css/core/components/status/container.css

@@ -0,0 +1,13 @@
+.status {
+    --color-status-bg: var(--color-content-bg);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--size-layout-gap);
+    padding: 15px;
+    text-wrap: pretty;
+
+    a {
+        word-break: break-word;
+    }
+}

app/css/core/components/status/content.css

@@ -0,0 +1,37 @@
+/* 🚥 Status: Content */
+.status__content__text {
+    > :first-child {
+        margin-block-start: 0;
+    }
+
+    > :last-child {
+        margin-block-end: 0;
+    }
+}
+
+.status__content__text a {
+    color: var(--color-accent);
+    text-decoration-line: underline;
+    text-decoration-color: var(--color-accent-bg);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+
+    &:hover {
+        text-decoration-color: var(--color-accent);
+    }
+}
+
+.status__content__text a.mention {
+    text-decoration: none;
+
+    span {
+        text-decoration-line: underline;
+        text-decoration-color: var(--color-accent-bg);
+        text-decoration-thickness: 2px;
+        text-underline-offset: 2px;
+    }
+
+    &:is(:active, :focus, :hover) span {
+        text-decoration-color: var(--color-accent);
+    }
+}

app/css/core/components/status/display-name.css

@@ -0,0 +1,35 @@
+/* 🚥 Status: Display name */
+.status__display-name {
+    align-self: start;
+    justify-self: start;
+    color: var(--color-content-fg);
+    font-size: 15px;
+    line-height: 1.2;
+    text-decoration: none;
+    overflow: hidden;
+
+    .display-name {
+        display: block;
+        max-width: 100%;
+        overflow: hidden;
+        font-weight: 700;
+        text-overflow: clip;
+    }
+
+    .display-name__html {
+        font-weight: 700;
+    }
+
+    .display-name__account {
+        color: var(--color-secondary-fg);
+        font-weight: 400;
+        word-break: normal;
+    }
+
+    &:hover .display-name__html {
+        text-decoration-line: underline;
+        text-decoration-color: currentColor;
+        text-decoration-thickness: 2px;
+        text-underline-offset: 2px;
+    }
+}

app/css/core/components/status/icons.css

@@ -0,0 +1,46 @@
+/* 🚥 Status: Icons */
+.status__info__icons {
+    --size-icon: 18px;
+
+    position: relative;
+    display: flex;
+    gap: 5px;
+    align-items: start;
+    color: var(--color-content-fg);
+
+    .text-icon {
+        font-size: 12px;
+        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;
+    margin: -3px;
+    padding: 2px;
+    color: inherit;
+    background-color: transparent;
+
+    svg.gts-icon {
+        transition: transform ease-in-out 0.2s;
+    }
+
+    &.active svg.gts-icon {
+        transform: rotate(-180deg);
+    }
+
+    &:hover {
+        color: var(--color-accent-hover);
+    }
+}

app/css/core/components/status/info.css

@@ -0,0 +1,10 @@
+/* 🚥 Status: Info */
+.status__info {
+    display: grid;
+    gap: 5px;
+    grid-template-columns: 1fr auto;
+
+    .notification__message {
+        grid-column: 1/-1;
+    }
+}

app/css/core/components/status/prepend.css

@@ -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-content-fg);
+    font-size: 13px;
+    font-weight: 500;
+    background-color: var(--color-content-secondary-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;
+    }
+}

app/css/core/modules/feed.css

@@ -0,0 +1,8 @@
+[role="feed"].item-list {
+}
+
+[role="feed"].item-list > article {
+    &:not(:last-child) {
+        border-bottom: 1px solid var(--color-lines);
+    }
+}

app/css/core/multiple-columns.css

@@ -0,0 +1,17 @@
+body.layout-multiple-columns {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+
+    :is(.app-holder, .app-holder > div, .columns-area) {
+        height: 100%;
+    }
+
+    .ui {
+        display: flex;
+        flex: 0 0 auto;
+    }
+}

app/css/core/scrollbars.css

@@ -0,0 +1,28 @@
+/* 🖱️ Scrollbars */
+:root:has(.app-body) *::-webkit-scrollbar-track {
+    background-color: var(--color-bg);
+    padding: 2px;
+}
+:root:has(.app-body) *::-webkit-scrollbar-thumb {
+    background-color: var(--color-accent);
+    border-radius: 8px;
+    opacity: 0.4;
+    box-shadow: none;
+}
+:root:has(.app-body) *::-webkit-scrollbar-track:hover {
+    background-color: var(--color-bg);
+}
+:root:has(.app-body) *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-accent);
+    opacity: 0.7;
+}
+@media screen and (max-width: 1175px) {
+    :root:has(.app-body) *::-webkit-scrollbar {
+        display: none;
+    }
+}
+:root,
+* {
+    scrollbar-color: var(--color-accent) var(--color-bg);
+    scrollbar-width: thin;
+}

app/css/core/sizes.css

@@ -0,0 +1,9 @@
+/* 📏 Sizes */
+:root {
+    --size-layout-gap: 10px;
+    --size-layout-radius: 8px;
+    --size-ui-gap: 5px;
+    --size-ui-radius: 6px;
+
+    --size-icon: max(1em, 20px);
+}

app/javascript/core/common.js

@@ -1,6 +1,5 @@
 //  This file will be loaded on all pages, regardless of theme.
 
 import "packs/public-path";
-import "font-awesome/css/font-awesome.css";
 
 require.context("../images/", true);

app/javascript/core/mailer.js

@@ -1,3 +0,0 @@
-import "../styles/mailer.scss";
-
-require.context("../icons");

app/javascript/core/theme.yml

@@ -10,9 +10,6 @@ pack:
   embed: embed.js
   error:
   home:
-  mailer:
-    filename: mailer.js
-    stylesheet: true
   modal:
   public:
   settings: settings.js

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

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

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>

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

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

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

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

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,

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

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

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

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

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

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

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>

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

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

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

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

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

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."
           />

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>

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>

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

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>
 

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>

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

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>

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 })=> (

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

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

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

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

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

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

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

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>
 

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>

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

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

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}

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={

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

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

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}

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 (

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

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>

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>

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

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}

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;

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>
 

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

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

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>
 

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

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>
 

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>

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

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>

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

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

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

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

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}

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}

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

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

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