[bugfix] only play animations when prefers-reduced-motion: no-preference

this can be generalised further i think but for now it does what i need it to do.

.editorconfig

@@ -3,5 +3,5 @@ root = true
 [*.scss]
 indent_size = 2
 
-[login.scss]
+[{**/login.scss,**/tangerine/**/*.scss,**/gts/**/*.scss}]
 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
 

Dockerfile

@@ -22,6 +22,9 @@ RUN yarn && yarn build:production
 ### RUNTIME IMAGE ###
 FROM nginx:alpine AS runtime
 
+# Ensure deps up to date.
+RUN apk upgrade --update --no-cache
+
 # Copy bigger nested stuff.
 COPY --from=builder /build/public/packs/js/flavours/glitch /usr/share/nginx/html/packs/js/flavours/glitch
 COPY --from=builder /build/public/packs/js/flavours/vanilla /usr/share/nginx/html/packs/js/flavours/vanilla

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/avatar.tsx

@@ -28,7 +28,8 @@ export const Avatar: React.FC<Props> = ({
     ...styleFromParent,
     width: `${size}px`,
     height: `${size}px`,
-    backgroundSize: `${size}px ${size}px`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
   };
 
   if (account) {

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,7 +819,6 @@ 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
@@ -829,7 +828,6 @@ class Status extends ImmutablePureComponent {
                 parseClick={parseClick}
               />
             ) : null}
-            </span>
             <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

@@ -354,15 +354,12 @@ class StatusContent extends PureComponent {
 
       return (
         <div className={classNames} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
-          <p
-            style={{ marginBottom: hidden && status.get("mentions").isEmpty() ? "0px" : null }}
-          >
           <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>
 
           {mentionsPlaceholder}
 

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

app/javascript/flavours/glitch/features/status/components/detailed_status.jsx

@@ -135,7 +135,7 @@ class DetailedStatus extends ImmutablePureComponent {
 
     let applicationLink = "";
     let reblogLink = "";
-    let reblogIcon = "retweet";
+    let reblogIcon = "rocket-launch";
     let favouriteLink = "";
     let edited = "";
 
@@ -255,9 +255,9 @@ class DetailedStatus extends ImmutablePureComponent {
     const visibilityLink = <> · <VisibilityIcon visibility={status.get("visibility")} /></>;
 
     if (status.get("visibility") === "direct") {
-      reblogIcon = "envelope";
+      reblogIcon = "at";
     } else if (status.get("visibility") === "private") {
-      reblogIcon = "lock";
+      reblogIcon = "lock-simple";
     }
 
     if (!["unlisted", "public"].includes(status.get("visibility"))) {

app/javascript/flavours/glitch/features/status/index.jsx

@@ -721,7 +721,7 @@ class Status extends ImmutablePureComponent {
     return (
       <Column bindToDocument={!multiColumn} ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}>
         <ColumnHeader
-          icon='comment'
+          icon='chat-circle-text'
           title={intl.formatMessage(messages.tootHeading)}
           onClick={this.handleHeaderClick}
           showBackButton

app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx

@@ -101,7 +101,7 @@ class SubscribedLanguagesModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-dialog-modal'>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={20} />
           <FormattedMessage id='subscribed_languages.target' defaultMessage='Change subscribed languages for {target}' values={{ target: <strong>{acct}</strong> }} />
         </div>
 

app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx

@@ -117,7 +117,7 @@ class BoostModal extends ImmutablePureComponent {
             { missingMediaDescription ?
               <FormattedMessage id='boost_modal.missing_description' defaultMessage='This toot contains some media without description' />
               :
-              <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} />
+              <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='rocket-launch' /></span> }} />
             }
           </div>
 

app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx

@@ -31,7 +31,7 @@ class BundleModalError extends Component {
     return (
       <div className='modal-root__modal error-modal'>
         <div className='error-modal__body'>
-          <IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
+          <IconButton title={formatMessage(messages.retry)} icon='arrows-clockwise' onClick={this.handleRetry} size={64} />
           {formatMessage(messages.error)}
         </div>
 

app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx

@@ -65,7 +65,7 @@ class CompareHistoryModal extends PureComponent {
     return (
       <div className='modal-root__modal compare-history-modal'>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' icon='x' onClick={onClose} size={20} />
           {label}
         </div>
 

app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx

@@ -51,12 +51,12 @@ class DeprecatedSettingsModal extends PureComponent {
             values={{
               app_settings: (
                 <strong className='deprecated-settings-label'>
-                  <Icon id='cogs' /> <FormattedMessage id='navigation_bar.app_settings' defaultMessage='App settings' />
+                  <Icon id='gear' /> <FormattedMessage id='navigation_bar.app_settings' defaultMessage='App settings' />
                 </strong>
               ),
               preferences: (
                 <strong className='deprecated-settings-label'>
-                  <Icon id='cog' /> <FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' />
+                  <Icon id='gear' /> <FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' />
                 </strong>
               ),
             }}

app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx

@@ -596,9 +596,9 @@ class DoodleModal extends ImmutablePureComponent {
             </div>
           </div>
           <div className='doodle-toolbar'>
-            <IconButton icon='pencil' title='Draw' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === "draw"} inverted />
-            <IconButton icon='bath' title='Fill' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === "fill"} inverted />
-            <IconButton icon='undo' title='Undo' label='Undo' onClick={this.undo} size={18} inverted />
+            <IconButton icon='pencil-simple-line' title='Draw' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === "draw"} inverted />
+            <IconButton icon='paint-bucket' title='Fill' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === "fill"} inverted />
+            <IconButton icon='arrow-counter-clockwise' title='Undo' label='Undo' onClick={this.undo} size={18} inverted />
             <IconButton icon='trash' title='Clear' label='Clear' onClick={this.handleClearBtn} size={18} inverted />
           </div>
           <div className='doodle-palette'>

app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx

@@ -62,7 +62,7 @@ class EmbedModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-modal embed-modal'>
         <div className='report-modal__target'>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={16} />
           <FormattedMessage id='status.embed' defaultMessage='Embed' />
         </div>
 

app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx

@@ -120,7 +120,7 @@ class FilterModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-dialog-modal'>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={20} />
           <FormattedMessage id='filter_modal.title.status' defaultMessage='Filter a post' />
         </div>
 

app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx

@@ -311,7 +311,7 @@ class FocalPointModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-modal' style={{ maxWidth: 960 }}>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={20} />
           <FormattedMessage id='upload_modal.edit_media' defaultMessage='Edit media' />
         </div>
 

app/javascript/flavours/glitch/features/ui/components/header.jsx

@@ -68,7 +68,7 @@ class Header extends PureComponent {
     if (signedIn) {
       content = (
         <>
-          {location.pathname !== "/search" && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' /></Link>}
+          {location.pathname !== "/search" && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='magnifying-glass' /></Link>}
           {location.pathname !== "/publish" && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
           <Account />
         </>

app/javascript/flavours/glitch/features/ui/components/image_modal.jsx

@@ -53,7 +53,7 @@ class ImageModal extends PureComponent {
         </div>
 
         <div className={navigationClassName}>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={40} />
         </div>
       </div>
     );

app/javascript/flavours/glitch/features/ui/components/list_panel.jsx

@@ -47,7 +47,7 @@ class ListPanel extends ImmutablePureComponent {
         <hr />
 
         {lists.map(list => (
-          <ColumnLink icon='list-ul' key={list.get("id")} strict text={list.get("title")} to={`/lists/${list.get("id")}`} transparent />
+          <ColumnLink icon='dot' key={list.get("id")} strict text={list.get("title")} to={`/lists/${list.get("id")}`} transparent />
         ))}
       </div>
     );

app/javascript/flavours/glitch/features/ui/components/media_modal.jsx

@@ -141,8 +141,8 @@ class MediaModal extends ImmutablePureComponent {
 
     const index = this.getIndex();
 
-    const leftNav  = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' fixedWidth /></button>;
-    const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' fixedWidth /></button>;
+    const leftNav  = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='caret-left' fixedWidth /></button>;
+    const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='caret-right' fixedWidth /></button>;
 
     const content = media.map((image) => {
       const width  = image.getIn(["meta", "original", "width"]) || null;
@@ -244,7 +244,7 @@ class MediaModal extends ImmutablePureComponent {
         </div>
 
         <div className={navigationClassName}>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={40} />
 
           {leftNav}
           {rightNav}

app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx

@@ -71,7 +71,7 @@ class NavigationPanel extends Component {
 
         {signedIn && (
           <>
-            <ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />
+            <ColumnLink transparent to='/home' icon='house-line' text={intl.formatMessage(messages.home)} />
             <ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
             <FollowRequestsColumnLink />
           </>
@@ -80,11 +80,11 @@ class NavigationPanel extends Component {
         {trendsEnabled ? (
           <ColumnLink transparent to='/explore' icon='hashtag' text={intl.formatMessage(messages.explore)} />
         ) : (
-          <ColumnLink transparent to='/search' icon='search' text={intl.formatMessage(messages.search)} />
+          <ColumnLink transparent to='/search' icon='magnifying-glass' text={intl.formatMessage(messages.search)} />
         )}
 
         {(signedIn || timelinePreview) && (
-          <ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
+          <ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='planet' text={intl.formatMessage(messages.firehose)} />
         )}
 
         {!signedIn && (
@@ -97,15 +97,15 @@ class NavigationPanel extends Component {
         {signedIn && (
           <>
             <ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} />
-            <ColumnLink transparent to='/bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} />
+            <ColumnLink transparent to='/bookmarks' icon='bookmarks' text={intl.formatMessage(messages.bookmarks)} />
             <ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} />
-            <ColumnLink transparent to='/lists' icon='list-ul' text={intl.formatMessage(messages.lists)} />
+            <ColumnLink transparent to='/lists' icon='list' text={intl.formatMessage(messages.lists)} />
 
             <ListPanel />
 
             <hr />
 
-            <ColumnLink transparent onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} />
+            <ColumnLink transparent onClick={onOpenSettings} icon='gear' text={intl.formatMessage(messages.app_settings)} />
             <ColumnLink transparent onClick={onLogout} icon='sign-out' text={intl.formatMessage(messages.logout)} />
           </>
         )}

app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx

@@ -117,7 +117,7 @@ const PageFour = ({ domain, intl }) => (
         </div>
 
         <div>
-          <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='globe' type={intl.formatMessage(messages.federated_title)} /></div>
+          <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='planet' type={intl.formatMessage(messages.federated_title)} /></div>
         </div>
       </div>
 

app/javascript/flavours/glitch/features/ui/components/report_modal.jsx

@@ -211,7 +211,7 @@ class ReportModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-dialog-modal'>
         <div className='report-modal__target'>
-          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={20} />
           <FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get("acct")}</strong> }} />
         </div>
 

app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx

@@ -420,12 +420,14 @@ class ZoomableImage extends PureComponent {
     const zoomButtonShouldHide = this.state.navigationHidden || this.props.zoomButtonHidden || this.state.zoomMatrix.rate <= MIN_SCALE ? "media-modal__zoom-button--hidden" : "";
     const zoomButtonTitle = this.state.zoomState === "compress" ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand);
 
+    const zoomButtonIcon = this.state.zoomState === "compress" ? "arrows-in-simple" : "arrows-out-simple";
+
     return (
       <>
         <IconButton
           className={`media-modal__zoom-button ${zoomButtonShouldHide}`}
           title={zoomButtonTitle}
-          icon={this.state.zoomState}
+          icon={zoomButtonIcon}
           onClick={this.handleZoomClick}
           size={40}
           style={{

app/javascript/flavours/glitch/features/video/index.jsx

@@ -639,8 +639,13 @@ class Video extends PureComponent {
 
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
-              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={autoFocus}><Icon id={paused ? "play" : "pause"} fixedWidth /></button>
-              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? "volume-off" : "volume-up"} fixedWidth /></button>
+              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={autoFocus}>
+                <Icon id={paused ? "play" : "pause"} fixedWidth />
+              </button>
+              
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}>
+                <Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth />
+              </button>
 
               <div className={classNames("video-player__volume", { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
                 <div className='video-player__volume__current' style={{ width: `${muted ? 0 : volume * 100}%` }} />
@@ -662,10 +667,10 @@ class Video extends PureComponent {
             </div>
 
             <div className='video-player__buttons right'>
-              {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
-              {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>}
-              {onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>}
-              <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? "compress" : "arrows-alt"} fixedWidth /></button>
+              {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash-filled' fixedWidth /></button>}
+              {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='arrows-out-simple' fixedWidth /></button>}
+              {onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='arrows-in-simple' fixedWidth /></button>}
+              <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? "arrows-in-simple" : "frame-corners"} fixedWidth /></button>
             </div>
           </div>
         </div>

app/javascript/flavours/glitch/main.jsx

@@ -5,6 +5,7 @@ import Mastodon from "flavours/glitch/containers/mastodon";
 import { me } from "flavours/glitch/initial_state";
 import * as perf from "flavours/glitch/performance";
 import ready from "flavours/glitch/ready";
+import { setReducedMotionBodyClass } from "flavours/glitch/utils/accessibility";
 import { store } from "flavours/glitch/store";
 
 /**
@@ -12,6 +13,7 @@ import { store } from "flavours/glitch/store";
  */
 function main() {
   perf.start("main()");
+  setReducedMotionBodyClass();
 
   return ready(async () => {
     const mountNode = document.getElementById("mastodon");

app/javascript/flavours/glitch/styles/_mixins.scss

@@ -10,7 +10,7 @@
   background-size: $size $size;
 }
 
-@mixin single-column($media, $parent: '&') {
+@mixin single-column($media, $parent: "&") {
   .auto-columns #{$parent} {
     @media #{$media} {
       @content;
@@ -21,7 +21,7 @@
   }
 }
 
-@mixin limited-single-column($media, $parent: '&') {
+@mixin limited-single-column($media, $parent: "&") {
   .auto-columns #{$parent},
   .single-column #{$parent} {
     @media #{$media} {
@@ -30,7 +30,7 @@
   }
 }
 
-@mixin multi-columns($media, $parent: '&') {
+@mixin multi-columns($media, $parent: "&") {
   .auto-columns #{$parent} {
     @media #{$media} {
       @content;
@@ -43,26 +43,23 @@
 
 @mixin fullwidth-gallery {
   &.full-width {
-    margin-left: -14px;
-    margin-right: -14px;
-    width: inherit;
+    margin-left: -10px;
+    margin-right: -10px;
+    width: calc(100% + 20px);
     max-width: none;
     border-radius: 0;
   }
 }
 
 @mixin search-input() {
-  outline: 0;
-  box-sizing: border-box;
   width: 100%;
-  border: 0;
-  box-shadow: none;
+  border: 1px solid var(--color-search-lines);
+  border-radius: var(--drawer-border-radius);
+  box-sizing: border-box;
+  color: var(--color-search-fg);
   font-family: inherit;
-  background: $ui-base-color;
-  color: $darker-text-color;
-  border-radius: 4px;
-  font-size: 14px;
-  margin: 0;
+  font-size: inherit;
+  background: var(--color-search-bg);
 }
 
 @mixin search-popout() {