diff --git a/app/soapbox/components/domain.js b/app/soapbox/components/domain.js
index 35c1b67ef..15f0b5b90 100644
--- a/app/soapbox/components/domain.js
+++ b/app/soapbox/components/domain.js
@@ -32,7 +32,7 @@ class Account extends ImmutablePureComponent {
           </span>
 
           <div className='domain__buttons'>
-            <IconButton active icon='unlock' title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
+            <IconButton active src={require('@tabler/icons/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
           </div>
         </div>
       </div>
diff --git a/app/soapbox/features/admin/components/report.js b/app/soapbox/features/admin/components/report.js
index 8ef9a3172..8ee02407e 100644
--- a/app/soapbox/features/admin/components/report.js
+++ b/app/soapbox/features/admin/components/report.js
@@ -115,7 +115,7 @@ class Report extends ImmutablePureComponent {
           <Button className='button-alternative' size={30} onClick={this.handleCloseReport}>
             <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
           </Button>
-          <DropdownMenu items={menu} icon='ellipsis-v' size={24} direction='right' />
+          <DropdownMenu className='admin-report__dropdown' items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
         </div>
       </div>
     );
diff --git a/app/soapbox/features/admin/components/report_status.js b/app/soapbox/features/admin/components/report_status.js
index 31cf1c031..3f73e904a 100644
--- a/app/soapbox/features/admin/components/report_status.js
+++ b/app/soapbox/features/admin/components/report_status.js
@@ -119,7 +119,7 @@ class ReportStatus extends ImmutablePureComponent {
           {media}
         </div>
         <div className='admin-report__status-actions'>
-          <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+          <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
         </div>
       </div>
     );
diff --git a/app/soapbox/features/aliases/components/account.js b/app/soapbox/features/aliases/components/account.js
index ff4ab069a..0e67b2238 100644
--- a/app/soapbox/features/aliases/components/account.js
+++ b/app/soapbox/features/aliases/components/account.js
@@ -65,7 +65,7 @@ class Account extends ImmutablePureComponent {
     if (!added && accountId !== me) {
       button = (
         <div className='account__relationship'>
-          <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={this.handleOnAdd} />
+          <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={this.handleOnAdd} />
         </div>
       );
     }
diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index 3abf4d673..a2c79a0a1 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -158,7 +158,10 @@ class ChatBox extends ImmutablePureComponent {
           {truncateFilename(attachment.preview_url, 20)}
         </div>
         <div class='chat-box__remove-attachment'>
-          <IconButton icon='remove' onClick={this.handleRemoveFile} />
+          <IconButton
+            src={require('@tabler/icons/icons/x.svg')}
+            onClick={this.handleRemoveFile}
+          />
         </div>
       </div>
     );
diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index 186563d56..3c7db735a 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -296,8 +296,7 @@ class ChatMessageList extends ImmutablePureComponent {
           <div className='chat-message__menu'>
             <DropdownMenuContainer
               items={menu}
-              icon='ellipsis-h'
-              size={18}
+              src={require('@tabler/icons/icons/dots.svg')}
               direction='top'
               title={intl.formatMessage(messages.more)}
             />
diff --git a/app/soapbox/features/compose/components/poll_form.js b/app/soapbox/features/compose/components/poll_form.js
index 6eada9114..81a5a37e3 100644
--- a/app/soapbox/features/compose/components/poll_form.js
+++ b/app/soapbox/features/compose/components/poll_form.js
@@ -109,7 +109,7 @@ class Option extends React.PureComponent {
         </label>
 
         <div className='poll__cancel'>
-          <IconButton title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} />
+          <IconButton title={intl.formatMessage(messages.remove_option)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleOptionRemove} />
         </div>
       </li>
     );
diff --git a/app/soapbox/features/compose/components/reply_indicator.js b/app/soapbox/features/compose/components/reply_indicator.js
index 1dac73a20..1e45dad80 100644
--- a/app/soapbox/features/compose/components/reply_indicator.js
+++ b/app/soapbox/features/compose/components/reply_indicator.js
@@ -46,7 +46,9 @@ class ReplyIndicator extends ImmutablePureComponent {
     return (
       <div className='reply-indicator'>
         <div className='reply-indicator__header'>
-          <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} inverted /></div>
+          <div className='reply-indicator__cancel'>
+            <IconButton title={intl.formatMessage(messages.cancel)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleClick} inverted />
+          </div>
 
           <NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='reply-indicator__display-name'>
             <div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
diff --git a/app/soapbox/features/compose/components/schedule_form.js b/app/soapbox/features/compose/components/schedule_form.js
index 1394cb6a2..fbbcb4856 100644
--- a/app/soapbox/features/compose/components/schedule_form.js
+++ b/app/soapbox/features/compose/components/schedule_form.js
@@ -115,7 +115,7 @@ class ScheduleForm extends React.Component {
             ref={this.setRef}
           />
           <div className='datepicker__cancel'>
-            <IconButton size={20} title={intl.formatMessage(messages.remove)} icon='times' onClick={this.handleRemove} />
+            <IconButton title={intl.formatMessage(messages.remove)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleRemove} />
           </div>
         </div>
       </div>
diff --git a/app/soapbox/features/follow_requests/components/account_authorize.js b/app/soapbox/features/follow_requests/components/account_authorize.js
index 298f8e9bc..ba8606690 100644
--- a/app/soapbox/features/follow_requests/components/account_authorize.js
+++ b/app/soapbox/features/follow_requests/components/account_authorize.js
@@ -39,8 +39,8 @@ class AccountAuthorize extends ImmutablePureComponent {
         </div>
 
         <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.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} /></div>
+          <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} /></div>
         </div>
       </div>
     );
diff --git a/app/soapbox/features/groups/timeline/components/header.js b/app/soapbox/features/groups/timeline/components/header.js
index 6fd5913f0..3dcf522a2 100644
--- a/app/soapbox/features/groups/timeline/components/header.js
+++ b/app/soapbox/features/groups/timeline/components/header.js
@@ -63,7 +63,7 @@ class Header extends ImmutablePureComponent {
       },
     ];
 
-    return <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />;
+    return <DropdownMenuContainer items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />;
   }
 
   render() {
diff --git a/app/soapbox/features/list_adder/components/list.js b/app/soapbox/features/list_adder/components/list.js
index 9d5957f06..159e9a01e 100644
--- a/app/soapbox/features/list_adder/components/list.js
+++ b/app/soapbox/features/list_adder/components/list.js
@@ -45,9 +45,9 @@ class List extends ImmutablePureComponent {
     let button;
 
     if (added) {
-      button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+      button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
     } else {
-      button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+      button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
     }
 
     return (
diff --git a/app/soapbox/features/list_adder/index.js b/app/soapbox/features/list_adder/index.js
index af15b4485..88e212fe4 100644
--- a/app/soapbox/features/list_adder/index.js
+++ b/app/soapbox/features/list_adder/index.js
@@ -74,7 +74,7 @@ class ListAdder extends ImmutablePureComponent {
           <h3 className='compose-modal__header__title'>
             <FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />
           </h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
         </div>
         <div className='compose-modal__content'>
           <div className='list-adder'>
diff --git a/app/soapbox/features/list_editor/components/account.js b/app/soapbox/features/list_editor/components/account.js
index 1379ad336..2ef3ed097 100644
--- a/app/soapbox/features/list_editor/components/account.js
+++ b/app/soapbox/features/list_editor/components/account.js
@@ -53,9 +53,9 @@ class Account extends ImmutablePureComponent {
     let button;
 
     if (added) {
-      button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+      button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
     } else {
-      button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+      button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
     }
 
     return (
diff --git a/app/soapbox/features/list_editor/index.js b/app/soapbox/features/list_editor/index.js
index 004f41d59..c9c732586 100644
--- a/app/soapbox/features/list_editor/index.js
+++ b/app/soapbox/features/list_editor/index.js
@@ -68,7 +68,7 @@ class ListEditor extends ImmutablePureComponent {
           <h3 className='compose-modal__header__title'>
             {intl.formatMessage(messages.editList)}
           </h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
         </div>
         <div className='compose-modal__content'>
           <div className='list-editor'>
diff --git a/app/soapbox/features/lists/index.js b/app/soapbox/features/lists/index.js
index 4a26624ba..0fa072551 100644
--- a/app/soapbox/features/lists/index.js
+++ b/app/soapbox/features/lists/index.js
@@ -71,7 +71,7 @@ class Lists extends ImmutablePureComponent {
           emptyMessage={emptyMessage}
         >
           {lists.map(list =>
-            <ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} />,
+            <ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
           )}
         </ScrollableList>
       </Column>
diff --git a/app/soapbox/features/notifications/components/follow_request.js b/app/soapbox/features/notifications/components/follow_request.js
index c15d8de23..d1c9c6402 100644
--- a/app/soapbox/features/notifications/components/follow_request.js
+++ b/app/soapbox/features/notifications/components/follow_request.js
@@ -48,8 +48,8 @@ class FollowRequest extends ImmutablePureComponent {
           </Permalink>
 
           <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.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} />
+            <IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} />
           </div>
         </div>
       </div>
diff --git a/app/soapbox/features/public_layout/components/header.js b/app/soapbox/features/public_layout/components/header.js
index 3c87739e6..5f7d065e2 100644
--- a/app/soapbox/features/public_layout/components/header.js
+++ b/app/soapbox/features/public_layout/components/header.js
@@ -88,7 +88,7 @@ class Header extends ImmutablePureComponent {
         { mfa_auth_needed &&
           <div className='otp-form-overlay__container'>
             <div className='otp-form-overlay__form'>
-              <IconButton className='otp-form-overlay__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+              <IconButton className='otp-form-overlay__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
               <OtpAuthForm mfa_token={mfa_token} />
             </div>
           </div>
diff --git a/app/soapbox/features/remote_timeline/index.js b/app/soapbox/features/remote_timeline/index.js
index 337081bb6..4aa515661 100644
--- a/app/soapbox/features/remote_timeline/index.js
+++ b/app/soapbox/features/remote_timeline/index.js
@@ -87,7 +87,7 @@ class RemoteTimeline extends React.PureComponent {
       <Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
         <PinnedHostsPicker host={instance} />
         {!pinned && <div className='timeline-filter-message'>
-          <IconButton icon='times' onClick={this.handleCloseClick} />
+          <IconButton src={require('@tabler/icons/icons/x.svg')} onClick={this.handleCloseClick} />
           <FormattedMessage
             id='remote_timeline.filter_message'
             defaultMessage='You are viewing the timeline of {instance}.'
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js
index e248c0eaf..f505eeacd 100644
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js
+++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js
@@ -47,7 +47,7 @@ class ScheduledStatusActionBar extends ImmutablePureComponent {
           <IconButton
             title={intl.formatMessage(messages.cancel)}
             text={intl.formatMessage(messages.cancel)}
-            icon='times'
+            src={require('@tabler/icons/icons/x.svg')}
             onClick={this.handleCancelClick}
           />
         </div>
diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js
index 4852eb5b7..3a6da7475 100644
--- a/app/soapbox/features/status/components/action_bar.js
+++ b/app/soapbox/features/status/components/action_bar.js
@@ -527,7 +527,7 @@ class ActionBar extends React.PureComponent {
             className='emoji-picker-expand'
             animate
             title={intl.formatMessage(messages.emojiPickerExpand)}
-            icon='caret-down'
+            src={require('@tabler/icons/icons/caret-down.svg')}
             onKeyUp={handleEmojiSelectorExpand}
             onHover
           />
diff --git a/app/soapbox/features/ui/components/accordion.js b/app/soapbox/features/ui/components/accordion.js
index 579871481..e537c9471 100644
--- a/app/soapbox/features/ui/components/accordion.js
+++ b/app/soapbox/features/ui/components/accordion.js
@@ -37,7 +37,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
       <div className={classNames('accordion', { 'accordion--expanded': expanded })}>
         {menu && (
           <div className='accordion__menu'>
-            <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+            <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
           </div>
         )}
         <button
diff --git a/app/soapbox/features/ui/components/column_link.js b/app/soapbox/features/ui/components/column_link.js
index 3522dbfaf..b85d0d0b7 100644
--- a/app/soapbox/features/ui/components/column_link.js
+++ b/app/soapbox/features/ui/components/column_link.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Icon from 'soapbox/components/icon';
 
-const ColumnLink = ({ icon, text, to, href, method, badge }) => {
+const ColumnLink = ({ icon, src, text, to, href, method, badge }) => {
   const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
 
   if (href) {
     return (
       <a href={href} className='column-link' data-method={method}>
-        <Icon id={icon} fixedWidth className='column-link__icon' />
+        <Icon id={icon} src={src} fixedWidth className='column-link__icon' />
         {text}
         {badgeElement}
       </a>
@@ -17,7 +17,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
   } else {
     return (
       <Link to={to} className='column-link'>
-        <Icon id={icon} fixedWidth className='column-link__icon' />
+        <Icon id={icon} src={src} fixedWidth className='column-link__icon' />
         {text}
         {badgeElement}
       </Link>
@@ -26,7 +26,8 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
 };
 
 ColumnLink.propTypes = {
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  src: PropTypes.string,
   text: PropTypes.string.isRequired,
   to: PropTypes.string,
   href: PropTypes.string,
diff --git a/app/soapbox/features/ui/components/hotkeys_modal.js b/app/soapbox/features/ui/components/hotkeys_modal.js
index 6d1434135..efbc8573f 100644
--- a/app/soapbox/features/ui/components/hotkeys_modal.js
+++ b/app/soapbox/features/ui/components/hotkeys_modal.js
@@ -23,7 +23,7 @@ class HotkeysModal extends ImmutablePureComponent {
       <div className='modal-root__modal hotkeys-modal'>
         <div className='compose-modal__header'>
           <h3 className='compose-modal__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
         </div>
         <div className='compose-modal__content'>
           <table>
diff --git a/app/soapbox/features/ui/components/instance_info_panel.js b/app/soapbox/features/ui/components/instance_info_panel.js
index 6d6356871..c1e192cf6 100644
--- a/app/soapbox/features/ui/components/instance_info_panel.js
+++ b/app/soapbox/features/ui/components/instance_info_panel.js
@@ -73,7 +73,7 @@ class InstanceInfoPanel extends ImmutablePureComponent {
             <span>{remoteInstance.get('host')}</span>
           </span>
           <div className='wtf-panel__menu'>
-            <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+            <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
           </div>
         </div>
       </div>
diff --git a/app/soapbox/features/ui/components/instance_moderation_panel.js b/app/soapbox/features/ui/components/instance_moderation_panel.js
index c52950457..719813edb 100644
--- a/app/soapbox/features/ui/components/instance_moderation_panel.js
+++ b/app/soapbox/features/ui/components/instance_moderation_panel.js
@@ -68,7 +68,7 @@ class InstanceModerationPanel extends ImmutablePureComponent {
             <span><FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' /></span>
           </span>
           {isAdmin && <div className='wtf-panel__menu'>
-            <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+            <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
           </div>}
         </div>
         <div className='wtf-panel__content'>
diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index b93e23edf..ce002d1c4 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/app/soapbox/features/ui/components/media_modal.js
@@ -271,7 +271,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)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
 
           {leftNav}
           {rightNav}
diff --git a/app/soapbox/features/ui/components/report_modal.js b/app/soapbox/features/ui/components/report_modal.js
index fd34da406..25fe49e31 100644
--- a/app/soapbox/features/ui/components/report_modal.js
+++ b/app/soapbox/features/ui/components/report_modal.js
@@ -107,7 +107,7 @@ class ReportModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-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)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
           <FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
         </div>
 
diff --git a/app/soapbox/features/ui/components/unauthorized_modal.js b/app/soapbox/features/ui/components/unauthorized_modal.js
index 4a7167e6e..0465a9af6 100644
--- a/app/soapbox/features/ui/components/unauthorized_modal.js
+++ b/app/soapbox/features/ui/components/unauthorized_modal.js
@@ -36,7 +36,7 @@ class UnauthorizedModal extends ImmutablePureComponent {
       <div className='modal-root__modal compose-modal unauthorized-modal'>
         <div className='compose-modal__header'>
           <h3 className='compose-modal__header__title'><FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} /></h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
         </div>
         <div className='compose-modal__content'>
           <div className='unauthorized-modal__content'>
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 53a20ac9d..b4c4034e0 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -690,6 +690,11 @@ $fluid-breakpoint: $maximum-width + 20px;
 
       .otp-form-overlay__close {
         align-self: flex-end;
+
+        .svg-icon {
+          height: 20px;
+          width: 20px;
+        }
       }
     }
   }
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 5c61002f6..92a08ac2d 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -456,6 +456,11 @@ a .account__avatar {
   display: flex;
   flex-direction: row;
   padding: 10px 0;
+
+  &__button .svg-icon {
+    height: 20px;
+    width: 20px;
+  }
 }
 
 .account__section-headline {
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 86b4da8ec..0defcb591 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -214,11 +214,18 @@
     position: absolute;
     top: -8px;
     right: -8px;
+    height: 20px;
+    padding: 1px;
     background: var(--background-color);
     border-radius: 999px;
     opacity: 0;
     pointer-events: none;
     transition: 0.2s;
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
   }
 }
 
diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss
index 4e3b25f25..88a34b05c 100644
--- a/app/styles/components/admin.scss
+++ b/app/styles/components/admin.scss
@@ -185,8 +185,10 @@
   }
 
   &__actions {
-    margin-left: auto;
     display: flex;
+    align-items: center;
+    height: fit-content;
+    margin-left: auto;
 
     .icon-button {
       padding-left: 10px;
@@ -195,6 +197,11 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
+        > .svg-icon {
+          height: 20px;
+          width: 20px;
+        }
       }
     }
   }
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 633fb612c..ca9cc1d00 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -286,7 +286,8 @@
 .column-link {
   background: var(--brand-color--med);
   color: var(--primary-text-color);
-  display: block;
+  display: flex;
+  align-items: center;
   font-size: 16px;
   padding: 15px;
   text-decoration: none;
@@ -318,7 +319,7 @@
   }
 }
 
-.column-link__icon {
+.svg-icon.column-link__icon {
   display: inline-block;
   margin-right: 5px;
 }
@@ -814,12 +815,19 @@
 }
 
 .timeline-filter-message {
+  display: flex;
+  align-items: center;
   background-color: var(--brand-color--faint);
   color: var(--primary-text-color);
   padding: 15px 20px;
 
   .icon-button {
-    margin-right: 8px;
+    margin: 2px 8px 2px 0;
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
   }
 }
 
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index 78a20b01f..9b359c55e 100644
--- a/app/styles/components/datepicker.scss
+++ b/app/styles/components/datepicker.scss
@@ -19,6 +19,11 @@
 
   &__cancel {
     padding-left: 10px;
+
+    .svg-icon {
+      height: 24px;
+      width: 24px;
+    }
   }
 
   &--error .react-datepicker__input-container {
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 244f42577..b86cf7b88 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -199,6 +199,8 @@
   position: absolute;
   right: 8px;
   top: 8px;
+  height: 48px;
+  width: 48px;
   z-index: 100;
   color: #fff;
 }
@@ -693,6 +695,8 @@
   .media-modal__close {
     top: 19px;
     right: 15px;
+    height: 20px;
+    width: 20px;
   }
 }
 
diff --git a/app/styles/components/reply-indicator.scss b/app/styles/components/reply-indicator.scss
index 367c6164a..f200dca31 100644
--- a/app/styles/components/reply-indicator.scss
+++ b/app/styles/components/reply-indicator.scss
@@ -18,7 +18,11 @@
 
 .reply-indicator__cancel {
   float: right;
-  line-height: 24px;
+
+  .svg-icon {
+    height: 20px;
+    width: 20px;
+  }
 }
 
 .reply-indicator__display-name {
diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss
index b76e7a6e4..120abe338 100644
--- a/app/styles/components/wtf-panel.scss
+++ b/app/styles/components/wtf-panel.scss
@@ -159,6 +159,10 @@
 
   &__menu {
     margin-left: auto;
+
+    > div {
+      height: 18px;
+    }
   }
 }
 
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 97871e1b3..ca3503938 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -167,6 +167,15 @@
     margin-right: 10px;
     font-size: 14px;
   }
+
+  &__cancel {
+    height: 20px;
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
+  }
 }
 
 .compose-form__poll-wrapper {
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index b724475e0..7e8d8018c 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -239,6 +239,11 @@
     font-size: 14px;
     font-weight: 500;
   }
+
+  &__buttons .svg-icon {
+    height: 18px;
+    width: 18px;
+  }
 }
 
 .domain__wrapper {