diff --git a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
new file mode 100644
index 000000000..963f55f26
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
@@ -0,0 +1,226 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import Picker from 'emoji-mart/dist-es/components/picker/picker';
+import Overlay from 'react-overlays/lib/Overlay';
+import classNames from 'classnames';
+import detectPassiveEvents from 'detect-passive-events';
+import Icon from 'soapbox/components/icon';
+
+const messages = defineMessages({
+  emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
+  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
+  emoji_not_found: { id: 'icon_button.not_found', defaultMessage: 'No icons!! (╯°□°）╯︵ ┻━┻' },
+  custom: { id: 'icon_button.icons', defaultMessage: 'Icons' },
+  search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
+});
+
+const backgroundImageFn = () => '';
+const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
+
+const categoriesSort = ['custom'];
+
+@injectIntl
+class IconPickerMenu extends React.PureComponent {
+
+  static propTypes = {
+    custom_emojis: PropTypes.object,
+    loading: PropTypes.bool,
+    onClose: PropTypes.func.isRequired,
+    onPick: PropTypes.func.isRequired,
+    style: PropTypes.object,
+    placement: PropTypes.string,
+    arrowOffsetLeft: PropTypes.string,
+    arrowOffsetTop: PropTypes.string,
+    intl: PropTypes.object.isRequired,
+  };
+
+  static defaultProps = {
+    style: {},
+    loading: true,
+  };
+
+  state = {
+    modifierOpen: false,
+    placement: null,
+  };
+
+  handleDocumentClick = e => {
+    if (this.node && !this.node.contains(e.target)) {
+      this.props.onClose();
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleDocumentClick, false);
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleDocumentClick, false);
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+  }
+
+  setRef = c => {
+    this.node = c;
+  }
+
+  getI18n = () => {
+    const { intl } = this.props;
+
+    return {
+      search: intl.formatMessage(messages.emoji_search),
+      notfound: intl.formatMessage(messages.emoji_not_found),
+      categories: {
+        search: intl.formatMessage(messages.search_results),
+        custom: intl.formatMessage(messages.custom),
+      },
+    };
+  }
+
+  handleClick = emoji => {
+    emoji.native = emoji.colons;
+
+    this.props.onClose();
+    this.props.onPick(emoji);
+  }
+
+  buildIcons = (customEmojis, autoplay = false) => {
+    const emojis = [];
+
+    Object.values(customEmojis).forEach(category => {
+      category.forEach(function(icon) {
+        const name = icon.replace('fa fa-', '');
+        if (icon !== 'email' && icon !== 'memo') {
+          emojis.push({
+            id: name,
+            name,
+            short_names: [name],
+            emoticons: [],
+            keywords: [name],
+            imageUrl: '',
+            render: <Icon id={name} />,
+          });
+        }
+      });
+    });
+
+    return emojis;
+  };
+
+  render() {
+    const { loading, style, intl, custom_emojis } = this.props;
+
+    if (loading) {
+      return <div style={{ width: 299 }} />;
+    }
+
+    let data = { compressed: true, categories: [], aliases: [], emojis: [] };
+    const title = intl.formatMessage(messages.emoji);
+    const { modifierOpen } = this.state;
+
+    return (
+      <div className={classNames('font-icon-picker emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
+        <Picker
+          perLine={8}
+          emojiSize={22}
+          include={categoriesSort}
+          sheetSize={32}
+          custom={this.buildIcons(custom_emojis)}
+          color=''
+          emoji=''
+          set=''
+          title={title}
+          i18n={this.getI18n()}
+          onClick={this.handleClick}
+          showPreview={false}
+          backgroundImageFn={backgroundImageFn}
+          emojiTooltip
+          noShowAnchors
+          data={data}
+        />
+      </div>
+    );
+  }
+
+}
+
+export default @injectIntl
+class IconPickerDropdown extends React.PureComponent {
+
+  static propTypes = {
+    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
+    intl: PropTypes.object.isRequired,
+    onPickEmoji: PropTypes.func.isRequired,
+    value: PropTypes.string,
+  };
+
+  state = {
+    active: false,
+    loading: false,
+  };
+
+  setRef = (c) => {
+    this.dropdown = c;
+  }
+
+  onShowDropdown = ({ target }) => {
+    this.setState({ active: true });
+
+    const { top } = target.getBoundingClientRect();
+    this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
+  }
+
+  onHideDropdown = () => {
+    this.setState({ active: false });
+  }
+
+  onToggle = (e) => {
+    if (!this.state.loading && (!e.key || e.key === 'Enter')) {
+      if (this.state.active) {
+        this.onHideDropdown();
+      } else {
+        this.onShowDropdown(e);
+      }
+    }
+  }
+
+  handleKeyDown = e => {
+    if (e.key === 'Escape') {
+      this.onHideDropdown();
+    }
+  }
+
+  setTargetRef = c => {
+    this.target = c;
+  }
+
+  findTarget = () => {
+    return this.target;
+  }
+
+  render() {
+    const { intl, onPickEmoji, value } = this.props;
+    const title = intl.formatMessage(messages.emoji);
+    const { active, loading, placement } = this.state;
+    let forkAwesomeIcons = require('../forkawesome.json');
+
+    return (
+      <div className='font-icon-picker-dropdown' onKeyDown={this.handleKeyDown}>
+        <div ref={this.setTargetRef} className='font-icon-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
+          <Icon id={value} />
+        </div>
+
+        <Overlay show={active} placement={placement} target={this.findTarget}>
+          <IconPickerMenu
+            custom_emojis={forkAwesomeIcons}
+            loading={loading}
+            onClose={this.onHideDropdown}
+            onPick={onPickEmoji}
+          />
+        </Overlay>
+      </div>
+    );
+  }
+
+}
diff --git a/app/soapbox/features/soapbox_config/forkawesome.json b/app/soapbox/features/soapbox_config/forkawesome.json
new file mode 100644
index 000000000..44cc80f25
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/forkawesome.json
@@ -0,0 +1,765 @@
+{
+  "Web Application Icons": [
+    "fa fa-glass",
+    "fa fa-music",
+    "fa fa-search",
+    "fa fa-envelope-o",
+    "fa fa-heart",
+    "fa fa-star",
+    "fa fa-star-o",
+    "fa fa-user",
+    "fa fa-film",
+    "fa fa-check",
+    "fa fa-times",
+    "fa fa-search-plus",
+    "fa fa-search-minus",
+    "fa fa-power-off",
+    "fa fa-signal",
+    "fa fa-cog",
+    "fa fa-trash-o",
+    "fa fa-home",
+    "fa fa-clock-o",
+    "fa fa-road",
+    "fa fa-download",
+    "fa fa-inbox",
+    "fa fa-refresh",
+    "fa fa-lock",
+    "fa fa-flag",
+    "fa fa-headphones",
+    "fa fa-volume-off",
+    "fa fa-volume-down",
+    "fa fa-volume-up",
+    "fa fa-qrcode",
+    "fa fa-barcode",
+    "fa fa-tag",
+    "fa fa-tags",
+    "fa fa-book",
+    "fa fa-bookmark",
+    "fa fa-print",
+    "fa fa-camera",
+    "fa fa-video-camera",
+    "fa fa-picture-o",
+    "fa fa-pencil",
+    "fa fa-map-marker",
+    "fa fa-adjust",
+    "fa fa-tint",
+    "fa fa-pencil-square-o",
+    "fa fa-share-square-o",
+    "fa fa-check-square-o",
+    "fa fa-arrows",
+    "fa fa-plus-circle",
+    "fa fa-minus-circle",
+    "fa fa-times-circle",
+    "fa fa-check-circle",
+    "fa fa-question-circle",
+    "fa fa-info-circle",
+    "fa fa-crosshairs",
+    "fa fa-times-circle-o",
+    "fa fa-check-circle-o",
+    "fa fa-ban",
+    "fa fa-share",
+    "fa fa-plus",
+    "fa fa-minus",
+    "fa fa-asterisk",
+    "fa fa-exclamation-circle",
+    "fa fa-gift",
+    "fa fa-leaf",
+    "fa fa-fire",
+    "fa fa-eye",
+    "fa fa-eye-slash",
+    "fa fa-exclamation-triangle",
+    "fa fa-plane",
+    "fa fa-calendar",
+    "fa fa-random",
+    "fa fa-comment",
+    "fa fa-magnet",
+    "fa fa-retweet",
+    "fa fa-shopping-cart",
+    "fa fa-folder",
+    "fa fa-folder-open",
+    "fa fa-arrows-v",
+    "fa fa-arrows-h",
+    "fa fa-bar-chart",
+    "fa fa-camera-retro",
+    "fa fa-key",
+    "fa fa-cogs",
+    "fa fa-comments",
+    "fa fa-thumbs-o-up",
+    "fa fa-thumbs-o-down",
+    "fa fa-star-half",
+    "fa fa-heart-o",
+    "fa fa-sign-out",
+    "fa fa-thumb-tack",
+    "fa fa-external-link",
+    "fa fa-sign-in",
+    "fa fa-trophy",
+    "fa fa-upload",
+    "fa fa-lemon-o",
+    "fa fa-phone",
+    "fa fa-square-o",
+    "fa fa-bookmark-o",
+    "fa fa-phone-square",
+    "fa fa-unlock",
+    "fa fa-credit-card",
+    "fa fa-rss",
+    "fa fa-hdd-o",
+    "fa fa-bullhorn",
+    "fa fa-bell-o",
+    "fa fa-certificate",
+    "fa fa-globe",
+    "fa fa-globe-e",
+    "fa fa-globe-w",
+    "fa fa-wrench",
+    "fa fa-tasks",
+    "fa fa-filter",
+    "fa fa-briefcase",
+    "fa fa-users",
+    "fa fa-cloud",
+    "fa fa-flask",
+    "fa fa-square",
+    "fa fa-bars",
+    "fa fa-magic",
+    "fa fa-truck",
+    "fa fa-money",
+    "fa fa-sort",
+    "fa fa-sort-desc",
+    "fa fa-sort-asc",
+    "fa fa-envelope",
+    "fa fa-gavel",
+    "fa fa-tachometer",
+    "fa fa-comment-o",
+    "fa fa-comments-o",
+    "fa fa-bolt",
+    "fa fa-sitemap",
+    "fa fa-umbrella",
+    "fa fa-lightbulb-o",
+    "fa fa-exchange",
+    "fa fa-cloud-download",
+    "fa fa-cloud-upload",
+    "fa fa-suitcase",
+    "fa fa-bell",
+    "fa fa-coffee",
+    "fa fa-cutlery",
+    "fa fa-building-o",
+    "fa fa-fighter-jet",
+    "fa fa-beer",
+    "fa fa-desktop",
+    "fa fa-laptop",
+    "fa fa-tablet",
+    "fa fa-mobile",
+    "fa fa-circle-o",
+    "fa fa-quote-left",
+    "fa fa-quote-right",
+    "fa fa-spinner",
+    "fa fa-circle",
+    "fa fa-reply",
+    "fa fa-folder-o",
+    "fa fa-folder-open-o",
+    "fa fa-smile-o",
+    "fa fa-frown-o",
+    "fa fa-meh-o",
+    "fa fa-gamepad",
+    "fa fa-keyboard-o",
+    "fa fa-flag-o",
+    "fa fa-flag-checkered",
+    "fa fa-terminal",
+    "fa fa-code",
+    "fa fa-reply-all",
+    "fa fa-star-half-o",
+    "fa fa-location-arrow",
+    "fa fa-crop",
+    "fa fa-code-fork",
+    "fa fa-question",
+    "fa fa-info",
+    "fa fa-exclamation",
+    "fa fa-puzzle-piece",
+    "fa fa-microphone",
+    "fa fa-microphone-slash",
+    "fa fa-shield",
+    "fa fa-calendar-o",
+    "fa fa-fire-extinguisher",
+    "fa fa-rocket",
+    "fa fa-anchor",
+    "fa fa-unlock-alt",
+    "fa fa-bullseye",
+    "fa fa-ellipsis-h",
+    "fa fa-ellipsis-v",
+    "fa fa-rss-square",
+    "fa fa-ticket",
+    "fa fa-minus-square",
+    "fa fa-minus-square-o",
+    "fa fa-level-up",
+    "fa fa-level-down",
+    "fa fa-check-square",
+    "fa fa-pencil-square",
+    "fa fa-external-link-square",
+    "fa fa-share-square",
+    "fa fa-compass",
+    "fa fa-caret-square-o-down",
+    "fa fa-caret-square-o-up",
+    "fa fa-caret-square-o-right",
+    "fa fa-sort-alpha-asc",
+    "fa fa-sort-alpha-desc",
+    "fa fa-sort-amount-asc",
+    "fa fa-sort-amount-desc",
+    "fa fa-sort-numeric-asc",
+    "fa fa-sort-numeric-desc",
+    "fa fa-thumbs-up",
+    "fa fa-thumbs-down",
+    "fa fa-female",
+    "fa fa-male",
+    "fa fa-sun-o",
+    "fa fa-moon-o",
+    "fa fa-archive",
+    "fa fa-bug",
+    "fa fa-caret-square-o-left",
+    "fa fa-dot-circle-o",
+    "fa fa-wheelchair",
+    "fa fa-plus-square-o",
+    "fa fa-space-shuttle",
+    "fa fa-envelope-square",
+    "fa fa-university",
+    "fa fa-graduation-cap",
+    "fa fa-language",
+    "fa fa-fax",
+    "fa fa-building",
+    "fa fa-child",
+    "fa fa-paw",
+    "fa fa-spoon",
+    "fa fa-cube",
+    "fa fa-cubes",
+    "fa fa-recycle",
+    "fa fa-car",
+    "fa fa-taxi",
+    "fa fa-tree",
+    "fa fa-database",
+    "fa fa-file-pdf-o",
+    "fa fa-file-word-o",
+    "fa fa-file-excel-o",
+    "fa fa-file-powerpoint-o",
+    "fa fa-file-image-o",
+    "fa fa-file-archive-o",
+    "fa fa-file-audio-o",
+    "fa fa-file-video-o",
+    "fa fa-file-code-o",
+    "fa fa-life-ring",
+    "fa fa-circle-o-notch",
+    "fa fa-paper-plane",
+    "fa fa-paper-plane-o",
+    "fa fa-history",
+    "fa fa-circle-thin",
+    "fa fa-sliders",
+    "fa fa-share-alt",
+    "fa fa-share-alt-square",
+    "fa fa-bomb",
+    "fa fa-futbol-o",
+    "fa fa-tty",
+    "fa fa-binoculars",
+    "fa fa-plug",
+    "fa fa-newspaper-o",
+    "fa fa-wifi",
+    "fa fa-calculator",
+    "fa fa-bell-slash",
+    "fa fa-bell-slash-o",
+    "fa fa-trash",
+    "fa fa-copyright",
+    "fa fa-at",
+    "fa fa-eyedropper",
+    "fa fa-paint-brush",
+    "fa fa-birthday-cake",
+    "fa fa-area-chart",
+    "fa fa-pie-chart",
+    "fa fa-line-chart",
+    "fa fa-toggle-off",
+    "fa fa-toggle-on",
+    "fa fa-bicycle",
+    "fa fa-bus",
+    "fa fa-cc",
+    "fa fa-cart-plus",
+    "fa fa-cart-arrow-down",
+    "fa fa-diamond",
+    "fa fa-ship",
+    "fa fa-user-secret",
+    "fa fa-motorcycle",
+    "fa fa-street-view",
+    "fa fa-heartbeat",
+    "fa fa-server",
+    "fa fa-user-plus",
+    "fa fa-user-times",
+    "fa fa-bed",
+    "fa fa-battery-full",
+    "fa fa-battery-three-quarters",
+    "fa fa-battery-half",
+    "fa fa-battery-quarter",
+    "fa fa-battery-empty",
+    "fa fa-mouse-pointer",
+    "fa fa-i-cursor",
+    "fa fa-object-group",
+    "fa fa-object-ungroup",
+    "fa fa-sticky-note",
+    "fa fa-sticky-note-o",
+    "fa fa-clone",
+    "fa fa-balance-scale",
+    "fa fa-hourglass-o",
+    "fa fa-hourglass-start",
+    "fa fa-hourglass-half",
+    "fa fa-hourglass-end",
+    "fa fa-hourglass",
+    "fa fa-hand-rock-o",
+    "fa fa-hand-paper-o",
+    "fa fa-hand-scissors-o",
+    "fa fa-hand-lizard-o",
+    "fa fa-hand-spock-o",
+    "fa fa-hand-pointer-o",
+    "fa fa-hand-peace-o",
+    "fa fa-trademark",
+    "fa fa-registered",
+    "fa fa-creative-commons",
+    "fa fa-television",
+    "fa fa-calendar-plus-o",
+    "fa fa-calendar-minus-o",
+    "fa fa-calendar-times-o",
+    "fa fa-calendar-check-o",
+    "fa fa-industry",
+    "fa fa-map-pin",
+    "fa fa-map-signs",
+    "fa fa-map-o",
+    "fa fa-map",
+    "fa fa-commenting",
+    "fa fa-commenting-o",
+    "fa fa-shopping-bag",
+    "fa fa-shopping-basket",
+    "fa fa-hashtag",
+    "fa fa-bluetooth",
+    "fa fa-bluetooth-b",
+    "fa fa-percent",
+    "fa fa-universal-access",
+    "fa fa-wheelchair-alt",
+    "fa fa-question-circle-o",
+    "fa fa-blind",
+    "fa fa-audio-description",
+    "fa fa-volume-control-phone",
+    "fa fa-braille",
+    "fa fa-assistive-listening-systems",
+    "fa fa-american-sign-language-interpreting",
+    "fa fa-deaf",
+    "fa fa-sign-language",
+    "fa fa-low-vision",
+    "fa fa-handshake-o",
+    "fa fa-envelope-open",
+    "fa fa-envelope-open-o",
+    "fa fa-address-book",
+    "fa fa-address-book-o",
+    "fa fa-address-card",
+    "fa fa-address-card-o",
+    "fa fa-user-circle",
+    "fa fa-user-circle-o",
+    "fa fa-user-o",
+    "fa fa-id-badge",
+    "fa fa-id-card",
+    "fa fa-id-card-o",
+    "fa fa-thermometer-full",
+    "fa fa-thermometer-three-quarters",
+    "fa fa-thermometer-half",
+    "fa fa-thermometer-quarter",
+    "fa fa-thermometer-empty",
+    "fa fa-shower",
+    "fa fa-bath",
+    "fa fa-podcast",
+    "fa fa-window-maximize",
+    "fa fa-window-minimize",
+    "fa fa-window-restore",
+    "fa fa-window-close",
+    "fa fa-window-close-o",
+    "fa fa-microchip",
+    "fa fa-snowflake-o",
+    "fa fa-mastodon",
+    "fa fa-mastodon-alt",
+    "fa fa-peertube",
+    "fa fa-diaspora",
+    "fa fa-friendica",
+    "fa fa-gnu-social",
+    "fa fa-liberapay-square",
+    "fa fa-liberapay",
+    "fa fa-scuttlebutt",
+    "fa fa-hubzilla",
+    "fa fa-social-home",
+    "fa fa-artstation",
+    "fa fa-discord",
+    "fa fa-discord-alt",
+    "fa fa-key-modern",
+    "fa fa-file-epub",
+    "fa fa-spell-check",
+    "fa fa-moon",
+    "fa fa-sun",
+    "fa fa-biometric"
+  ],
+  "Text Editor Icons": [
+    "fa fa-th-large",
+    "fa fa-th",
+    "fa fa-th-list",
+    "fa fa-file-o",
+    "fa fa-repeat",
+    "fa fa-list-alt",
+    "fa fa-font",
+    "fa fa-bold",
+    "fa fa-italic",
+    "fa fa-text-height",
+    "fa fa-text-width",
+    "fa fa-align-left",
+    "fa fa-align-center",
+    "fa fa-align-right",
+    "fa fa-align-justify",
+    "fa fa-list",
+    "fa fa-outdent",
+    "fa fa-indent",
+    "fa fa-link",
+    "fa fa-scissors",
+    "fa fa-files-o",
+    "fa fa-paperclip",
+    "fa fa-floppy-o",
+    "fa fa-list-ul",
+    "fa fa-list-ol",
+    "fa fa-strikethrough",
+    "fa fa-underline",
+    "fa fa-table",
+    "fa fa-columns",
+    "fa fa-undo",
+    "fa fa-clipboard",
+    "fa fa-file-text-o",
+    "fa fa-chain-broken",
+    "fa fa-superscript",
+    "fa fa-subscript",
+    "fa fa-eraser",
+    "fa fa-file",
+    "fa fa-file-text",
+    "fa fa-header",
+    "fa fa-paragraph"
+  ],
+  "Directional Icons": [
+    "fa fa-arrow-circle-o-down",
+    "fa fa-arrow-circle-o-up",
+    "fa fa-chevron-left",
+    "fa fa-chevron-right",
+    "fa fa-arrow-left",
+    "fa fa-arrow-right",
+    "fa fa-arrow-up",
+    "fa fa-arrow-down",
+    "fa fa-chevron-up",
+    "fa fa-chevron-down",
+    "fa fa-hand-o-right",
+    "fa fa-hand-o-left",
+    "fa fa-hand-o-up",
+    "fa fa-hand-o-down",
+    "fa fa-arrow-circle-left",
+    "fa fa-arrow-circle-right",
+    "fa fa-arrow-circle-up",
+    "fa fa-arrow-circle-down",
+    "fa fa-caret-down",
+    "fa fa-caret-up",
+    "fa fa-caret-left",
+    "fa fa-caret-right",
+    "fa fa-angle-double-left",
+    "fa fa-angle-double-right",
+    "fa fa-angle-double-up",
+    "fa fa-angle-double-down",
+    "fa fa-angle-left",
+    "fa fa-angle-right",
+    "fa fa-angle-up",
+    "fa fa-angle-down",
+    "fa fa-chevron-circle-left",
+    "fa fa-chevron-circle-right",
+    "fa fa-chevron-circle-up",
+    "fa fa-chevron-circle-down",
+    "fa fa-long-arrow-down",
+    "fa fa-long-arrow-up",
+    "fa fa-long-arrow-left",
+    "fa fa-long-arrow-right",
+    "fa fa-arrow-circle-o-right",
+    "fa fa-arrow-circle-o-left"
+  ],
+  "Video Player Icons": [
+    "fa fa-play-circle-o",
+    "fa fa-step-backward",
+    "fa fa-fast-backward",
+    "fa fa-backward",
+    "fa fa-play",
+    "fa fa-pause",
+    "fa fa-stop",
+    "fa fa-forward",
+    "fa fa-fast-forward",
+    "fa fa-step-forward",
+    "fa fa-eject",
+    "fa fa-expand",
+    "fa fa-compress",
+    "fa fa-arrows-alt",
+    "fa fa-play-circle",
+    "fa fa-pause-circle",
+    "fa fa-pause-circle-o",
+    "fa fa-stop-circle",
+    "fa fa-stop-circle-o"
+  ],
+  "Brand Icons": [
+    "fa fa-twitter-square",
+    "fa fa-facebook-square",
+    "fa fa-github-square",
+    "fa fa-twitter",
+    "fa fa-facebook",
+    "fa fa-github",
+    "fa fa-pinterest",
+    "fa fa-google-plus-square",
+    "fa fa-google-plus",
+    "fa fa-linkedin",
+    "fa fa-github-alt",
+    "fa fa-maxcdn",
+    "fa fa-html5",
+    "fa fa-css3",
+    "fa fa-youtube-square",
+    "fa fa-youtube",
+    "fa fa-xing",
+    "fa fa-xing-square",
+    "fa fa-youtube-play",
+    "fa fa-dropbox",
+    "fa fa-stack-overflow",
+    "fa fa-instagram",
+    "fa fa-flickr",
+    "fa fa-adn",
+    "fa fa-bitbucket",
+    "fa fa-bitbucket-square",
+    "fa fa-tumblr",
+    "fa fa-apple",
+    "fa fa-windows",
+    "fa fa-android",
+    "fa fa-linux",
+    "fa fa-dribbble",
+    "fa fa-skype",
+    "fa fa-foursquare",
+    "fa fa-trello",
+    "fa fa-gratipay",
+    "fa fa-vk",
+    "fa fa-weibo",
+    "fa fa-renren",
+    "fa fa-pagelines",
+    "fa fa-stack-exchange",
+    "fa fa-vimeo-square",
+    "fa fa-slack",
+    "fa fa-wordpress",
+    "fa fa-openid",
+    "fa fa-yahoo",
+    "fa fa-google",
+    "fa fa-reddit",
+    "fa fa-stumbleupon-circle",
+    "fa fa-stumbleupon",
+    "fa fa-delicious",
+    "fa fa-digg",
+    "fa fa-drupal",
+    "fa fa-joomla",
+    "fa fa-behance",
+    "fa fa-behance-square",
+    "fa fa-steam",
+    "fa fa-steam-square",
+    "fa fa-spotify",
+    "fa fa-deviantart",
+    "fa fa-soundcloud",
+    "fa fa-vine",
+    "fa fa-codepen",
+    "fa fa-jsfiddle",
+    "fa fa-rebel",
+    "fa fa-empire",
+    "fa fa-git-square",
+    "fa fa-git",
+    "fa fa-hacker-news",
+    "fa fa-tencent-weibo",
+    "fa fa-qq",
+    "fa fa-weixin",
+    "fa fa-slideshare",
+    "fa fa-twitch",
+    "fa fa-yelp",
+    "fa fa-paypal",
+    "fa fa-google-wallet",
+    "fa fa-cc-visa",
+    "fa fa-cc-mastercard",
+    "fa fa-cc-discover",
+    "fa fa-cc-amex",
+    "fa fa-cc-paypal",
+    "fa fa-cc-stripe",
+    "fa fa-lastfm",
+    "fa fa-lastfm-square",
+    "fa fa-ioxhost",
+    "fa fa-angellist",
+    "fa fa-meanpath",
+    "fa fa-buysellads",
+    "fa fa-connectdevelop",
+    "fa fa-dashcube",
+    "fa fa-forumbee",
+    "fa fa-leanpub",
+    "fa fa-sellsy",
+    "fa fa-shirtsinbulk",
+    "fa fa-simplybuilt",
+    "fa fa-skyatlas",
+    "fa fa-facebook-official",
+    "fa fa-whatsapp",
+    "fa fa-medium",
+    "fa fa-medium-square",
+    "fa fa-y-combinator",
+    "fa fa-optin-monster",
+    "fa fa-opencart",
+    "fa fa-expeditedssl",
+    "fa fa-cc-jcb",
+    "fa fa-cc-diners-club",
+    "fa fa-tripadvisor",
+    "fa fa-odnoklassniki",
+    "fa fa-odnoklassniki-square",
+    "fa fa-get-pocket",
+    "fa fa-wikipedia-w",
+    "fa fa-safari",
+    "fa fa-chrome",
+    "fa fa-firefox",
+    "fa fa-opera",
+    "fa fa-internet-explorer",
+    "fa fa-contao",
+    "fa fa-500px",
+    "fa fa-amazon",
+    "fa fa-houzz",
+    "fa fa-vimeo",
+    "fa fa-black-tie",
+    "fa fa-fonticons",
+    "fa fa-reddit-alien",
+    "fa fa-edge",
+    "fa fa-codiepie",
+    "fa fa-modx",
+    "fa fa-fort-awesome",
+    "fa fa-usb",
+    "fa fa-product-hunt",
+    "fa fa-mixcloud",
+    "fa fa-scribd",
+    "fa fa-gitlab",
+    "fa fa-wpbeginner",
+    "fa fa-wpforms",
+    "fa fa-envira",
+    "fa fa-glide",
+    "fa fa-glide-g",
+    "fa fa-viadeo",
+    "fa fa-viadeo-square",
+    "fa fa-snapchat",
+    "fa fa-snapchat-ghost",
+    "fa fa-snapchat-square",
+    "fa fa-first-order",
+    "fa fa-yoast",
+    "fa fa-themeisle",
+    "fa fa-google-plus-official",
+    "fa fa-font-awesome",
+    "fa fa-linode",
+    "fa fa-quora",
+    "fa fa-free-code-camp",
+    "fa fa-telegram",
+    "fa fa-bandcamp",
+    "fa fa-grav",
+    "fa fa-etsy",
+    "fa fa-imdb",
+    "fa fa-ravelry",
+    "fa fa-eercast",
+    "fa fa-superpowers",
+    "fa fa-wpexplorer",
+    "fa fa-meetup",
+    "fa fa-fork-awesome",
+    "fa fa-snowdrift",
+    "fa fa-activitypub",
+    "fa fa-keybase",
+    "fa fa-shaarli",
+    "fa fa-shaarli-o",
+    "fa fa-xmpp",
+    "fa fa-archive-org",
+    "fa fa-freedombox",
+    "fa fa-facebook-messenger",
+    "fa fa-debian",
+    "fa fa-mastodon-square",
+    "fa fa-react",
+    "fa fa-dogmazic",
+    "fa fa-zotero",
+    "fa fa-nodejs",
+    "fa fa-nextcloud",
+    "fa fa-nextcloud-square",
+    "fa fa-hackaday",
+    "fa fa-laravel",
+    "fa fa-gnupg",
+    "fa fa-php",
+    "fa fa-ffmpeg",
+    "fa fa-joplin",
+    "fa fa-syncthing",
+    "fa fa-inkscape",
+    "fa fa-matrix-org",
+    "fa fa-pixelfed",
+    "fa fa-bootstrap",
+    "fa fa-dev-to",
+    "fa fa-hashnode",
+    "fa fa-jirafeau",
+    "fa fa-emby",
+    "fa fa-wikidata",
+    "fa fa-gimp",
+    "fa fa-c",
+    "fa fa-digitalocean",
+    "fa fa-att",
+    "fa fa-gitea",
+    "fa fa-python",
+    "fa fa-archlinux",
+    "fa fa-pleroma",
+    "fa fa-unsplash",
+    "fa fa-hackster",
+    "fa fa-f-droid",
+    "fa fa-signalapp"
+  ],
+  "Medical Icons": [
+    "fa fa-user-md",
+    "fa fa-stethoscope",
+    "fa fa-hospital-o",
+    "fa fa-ambulance",
+    "fa fa-medkit",
+    "fa fa-h-square",
+    "fa fa-plus-square"
+  ],
+  "Currency Icons": [
+    "fa fa-eur",
+    "fa fa-gbp",
+    "fa fa-usd",
+    "fa fa-inr",
+    "fa fa-jpy",
+    "fa fa-rub",
+    "fa fa-krw",
+    "fa fa-try",
+    "fa fa-ils",
+    "fa fa-viacoin",
+    "fa fa-gg",
+    "fa fa-gg-circle"
+  ],
+  "Payment Icons": [
+    "fa fa-btc",
+    "fa fa-credit-card-alt",
+    "fa fa-patreon",
+    "fa fa-ethereum",
+    "fa fa-tipeee"
+  ],
+  "Gender Icons": [
+    "fa fa-venus",
+    "fa fa-mars",
+    "fa fa-mercury",
+    "fa fa-transgender",
+    "fa fa-transgender-alt",
+    "fa fa-venus-double",
+    "fa fa-mars-double",
+    "fa fa-venus-mars",
+    "fa fa-mars-stroke",
+    "fa fa-mars-stroke-v",
+    "fa fa-mars-stroke-h",
+    "fa fa-neuter",
+    "fa fa-genderless"
+  ],
+  "Transportation Icons": [
+    "fa fa-train",
+    "fa fa-subway"
+  ],
+  "Soapbox Icons": [
+    "fa fa-fediverse",
+    "fa fa-spinster"
+  ]
+}
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index 3c53a0652..37b3dd1fb 100644
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@@ -26,6 +26,7 @@ import Accordion from '../ui/components/accordion';
 import SitePreview from './components/site_preview';
 import ThemeToggle from 'soapbox/features/ui/components/theme_toggle';
 import { defaultSettings } from 'soapbox/actions/settings';
+import IconPickerDropdown from './components/icon_picker_dropdown';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@@ -135,24 +136,24 @@ class SoapboxConfig extends ImmutablePureComponent {
     };
   };
 
-  handleItemChange = (path, key, field, template) => {
+  handleItemChange = (path, key, field, template, getValue = e => e.target.value) => {
     return this.handleChange(
       path, (e) =>
         template
           .merge(field)
-          .set(key, e.target.value),
+          .set(key, getValue(e)),
     );
   };
 
-  handlePromoItemChange = (index, key, field) => {
+  handlePromoItemChange = (index, key, field, getValue) => {
     return this.handleItemChange(
-      ['promoPanel', 'items', index], key, field, templates.promoPanelItem,
+      ['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue,
     );
   };
 
-  handleHomeFooterItemChange = (index, key, field) => {
+  handleHomeFooterItemChange = (index, key, field, getValue) => {
     return this.handleItemChange(
-      ['navlinks', 'homeFooter', index], key, field, templates.footerItem,
+      ['navlinks', 'homeFooter', index], key, field, templates.footerItem, getValue,
     );
   };
 
@@ -234,7 +235,7 @@ class SoapboxConfig extends ImmutablePureComponent {
               />
             </FieldsGroup>
             <FieldsGroup>
-              <div className='input with_block_label'>
+              <div className='input with_block_label popup'>
                 <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
                 <span className='hint'>
                   <FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
@@ -245,11 +246,10 @@ class SoapboxConfig extends ImmutablePureComponent {
                 {
                   soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
                     <div className='row' key={i}>
-                      <TextInput
+                      <IconPicker
                         label={intl.formatMessage(messages.promoItemIcon)}
-                        placeholder={intl.formatMessage(messages.promoItemIcon)}
                         value={field.get('icon')}
-                        onChange={this.handlePromoItemChange(i, 'icon', field)}
+                        onChange={this.handlePromoItemChange(i, 'icon', field, val => val.id)}
                       />
                       <TextInput
                         label={intl.formatMessage(messages.promoItemLabel)}
@@ -427,3 +427,29 @@ class ColorWithPicker extends ImmutablePureComponent {
   }
 
 }
+
+export class IconPicker extends ImmutablePureComponent {
+
+  static propTypes = {
+    icons: PropTypes.object,
+    label: FormPropTypes.label,
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const { onChange, value, label } = this.props;
+
+    return (
+      <div className='input with_label font_icon_picker'>
+        <div className='label_input__font_icon_picker'>
+          {label && (<label>{label}</label>)}
+          <div className='label_input_wrapper'>
+            <IconPickerDropdown value={value} onPickEmoji={onChange} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss
index 9ac429152..df3b3574e 100644
--- a/app/styles/emoji_picker.scss
+++ b/app/styles/emoji_picker.scss
@@ -173,6 +173,13 @@
   display: inline-block;
   font-size: 0;
 
+  .fa {
+    font-size: 18px;
+    width: 22px;
+    height: 22px;
+    text-align: center;
+  }
+
   span {
     width: 22px;
     height: 22px;
diff --git a/app/styles/fonts.scss b/app/styles/fonts.scss
index 500eafa28..542e5e41e 100644
--- a/app/styles/fonts.scss
+++ b/app/styles/fonts.scss
@@ -163,12 +163,12 @@
   font-style: normal;
 }
 
-.fa-users::before {
-  font-family: 'ForkAwesome';
-  content: '\f0c0';
-}
-
 .fa-fediverse::before {
-  font-family: 'soapbox' !important;
+  font-family: 'soapbox';
   content: "\e901";
 }
+
+.fa-spinster::before {
+  font-family: 'soapbox';
+  content: "\e900";
+}
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 3fcaddcd9..9850138e5 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -179,6 +179,10 @@ code {
     }
   }
 
+  .input.font_icon_picker {
+    width: 52px;
+  }
+
   .input.with_block_label {
     max-width: none;
 
@@ -302,7 +306,8 @@ code {
   input[type=number],
   input[type=email],
   input[type=password],
-  textarea {
+  textarea,
+  .rfipbtn {
     box-sizing: border-box;
     font-size: 16px;
     color: var(--primary-text-color);
@@ -335,6 +340,11 @@ code {
     }
   }
 
+  .rfip {
+    width: 100%;
+    margin: 0;
+  }
+
   input[type=text][disabled],
   input[type=number][disabled],
   input[type=email][disabled],
@@ -501,6 +511,22 @@ code {
       }
     }
 
+    &__font_icon_picker {
+      font-size: 14px;
+
+      .font-icon-button {
+        padding: 9px;
+        border: 1px solid var(--highlight-text-color);
+        border-radius: 4px;
+        cursor: pointer;
+
+        .fa {
+          font-size: 18px;
+          color: var(--primary-text-color);
+        }
+      }
+    }
+
     &__wrapper {
       position: relative;
     }
@@ -701,7 +727,7 @@ code {
   }
 }
 
-.input .row .fa-times-circle {
+.input .row > .fa-times-circle {
   position: absolute;
   right: 7px;
   cursor: pointer;
diff --git a/package.json b/package.json
index 0bad95f87..f53c7b6de 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "cssnano": "^4.1.10",
     "detect-passive-events": "^2.0.0",
     "dotenv": "^8.0.0",
-    "emoji-mart": "Gargron/emoji-mart#build",
+    "emoji-mart": "https://gitlab.com/seanking2919/emoji-mart#build",
     "es6-symbol": "^3.1.1",
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",
diff --git a/yarn.lock b/yarn.lock
index 3dcd129df..3d016fa65 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4480,9 +4480,9 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-emoji-mart@Gargron/emoji-mart#build:
-  version "2.6.2"
-  resolved "https://codeload.github.com/Gargron/emoji-mart/tar.gz/ff00dc470b5b2d9f145a6d6e977a54de5df2b4c9"
+"emoji-mart@https://gitlab.com/seanking2919/emoji-mart#build":
+  version "2.6.3"
+  resolved "https://gitlab.com/seanking2919/emoji-mart#4bdefa3d3ee7eb58716adc8727f688facc557291"
 
 emoji-regex@^7.0.1:
   version "7.0.3"