From 619efd257daf9b1a5f30d993a37a4f7a67a443b8 Mon Sep 17 00:00:00 2001
From: jimbiscuit <julienchandelle@gmail.com>
Date: Fri, 24 Feb 2023 15:01:27 +0100
Subject: [PATCH] feat: Add Icon Selector Widget

---
 src/default/CategoryLayoutRenderer.jsx |   13 +
 src/default/CategoryRenderer.jsx       |    9 +
 src/default/ResultRenderer.jsx         |    8 +
 src/default/iconList.js                | 2121 ++++++++++++++++++++++++
 src/default/index.js                   |    6 +
 src/index.js                           |   26 +
 src/styles/style.less                  |   20 +
 src/view/IconSelectorWidget.jsx        |   16 +
 src/widget/IconSelectorWidget.jsx      |  128 ++
 9 files changed, 2347 insertions(+)
 create mode 100644 src/default/CategoryLayoutRenderer.jsx
 create mode 100644 src/default/CategoryRenderer.jsx
 create mode 100644 src/default/ResultRenderer.jsx
 create mode 100644 src/default/iconList.js
 create mode 100644 src/default/index.js
 create mode 100644 src/styles/style.less
 create mode 100644 src/view/IconSelectorWidget.jsx
 create mode 100644 src/widget/IconSelectorWidget.jsx

diff --git a/src/default/CategoryLayoutRenderer.jsx b/src/default/CategoryLayoutRenderer.jsx
new file mode 100644
index 0000000..23dc4a6
--- /dev/null
+++ b/src/default/CategoryLayoutRenderer.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const CategoryLayoutRenderer = (props) => {
+  const { categoryContent, resultsContent } = props;
+  return (
+    <div>
+      <h3 className="name">{categoryContent}</h3>
+      <div className="results">{resultsContent}</div>
+    </div>
+  );
+};
+
+export default CategoryLayoutRenderer;
diff --git a/src/default/CategoryRenderer.jsx b/src/default/CategoryRenderer.jsx
new file mode 100644
index 0000000..8f71558
--- /dev/null
+++ b/src/default/CategoryRenderer.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react';
+
+const CategoryRenderer = (props) => {
+  const { name } = props;
+  return <div className="category-title">{name}</div>;
+};
+
+export default CategoryRenderer;
diff --git a/src/default/ResultRenderer.jsx b/src/default/ResultRenderer.jsx
new file mode 100644
index 0000000..7141109
--- /dev/null
+++ b/src/default/ResultRenderer.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Icon, Popup } from 'semantic-ui-react';
+
+const ResultRenderer = (props) => {
+  return <Popup trigger={<Icon name={props.name} />}>{props.name}</Popup>;
+};
+
+export default ResultRenderer;
diff --git a/src/default/iconList.js b/src/default/iconList.js
new file mode 100644
index 0000000..6240516
--- /dev/null
+++ b/src/default/iconList.js
@@ -0,0 +1,2121 @@
+export const iconList = {
+  accessibility: {
+    title: 'Accessibility',
+    list: [
+      { name: 'american sign language interpreting' },
+      { name: 'assistive listening systems' },
+      { name: 'audio description' },
+      { name: 'blind' },
+      { name: 'braille' },
+      { name: 'closed captioning' },
+      { name: 'closed captioning outline' },
+      { name: 'deaf' },
+      { name: 'low vision' },
+      { name: 'phone volume' },
+      { name: 'question circle' },
+      { name: 'question circle outline' },
+      { name: 'sign language' },
+      { name: 'tty' },
+      { name: 'universal access' },
+      { name: 'wheelchair' },
+    ],
+  },
+  arrows: {
+    title: 'Arrows',
+    list: [
+      { name: 'angle double down' },
+      { name: 'angle double left' },
+      { name: 'angle double right' },
+      { name: 'angle double up' },
+      { name: 'angle down' },
+      { name: 'angle left' },
+      { name: 'angle right' },
+      { name: 'angle up' },
+      { name: 'arrow alternate circle down' },
+      { name: 'arrow alternate circle down outline' },
+      { name: 'arrow alternate circle left' },
+      { name: 'arrow alternate circle left outline' },
+      { name: 'arrow alternate circle right' },
+      { name: 'arrow alternate circle right outline' },
+      { name: 'arrow alternate circle up' },
+      { name: 'arrow alternate circle up outline' },
+      { name: 'arrow circle down' },
+      { name: 'arrow circle left' },
+      { name: 'arrow circle right' },
+      { name: 'arrow circle up' },
+      { name: 'arrow down' },
+      { name: 'arrow left' },
+      { name: 'arrow right' },
+      { name: 'arrow up' },
+      { name: 'arrows alternate' },
+      { name: 'arrows alternate horizontal' },
+      { name: 'arrows alternate vertical' },
+      { name: 'caret down' },
+      { name: 'caret left' },
+      { name: 'caret right' },
+      { name: 'caret square down' },
+      { name: 'caret square down outline' },
+      { name: 'caret square left' },
+      { name: 'caret square left outline' },
+      { name: 'caret square right' },
+      { name: 'caret square right outline' },
+      { name: 'caret square up' },
+      { name: 'caret square up outline' },
+      { name: 'caret up' },
+      { name: 'cart arrow down' },
+      { name: 'chart line' },
+      { name: 'chevron circle down' },
+      { name: 'chevron circle left' },
+      { name: 'chevron circle right' },
+      { name: 'chevron circle up' },
+      { name: 'chevron down' },
+      { name: 'chevron left' },
+      { name: 'chevron right' },
+      { name: 'chevron up' },
+      { name: 'cloud download' },
+      { name: 'cloud upload' },
+      { name: 'download' },
+      { name: 'exchange' },
+      { name: 'expand arrows alternate' },
+      { name: 'external alternate' },
+      { name: 'external square alternate' },
+      { name: 'hand point down' },
+      { name: 'hand point down outline' },
+      { name: 'hand point left' },
+      { name: 'hand point left outline' },
+      { name: 'hand point right' },
+      { name: 'hand point right outline' },
+      { name: 'hand point up' },
+      { name: 'hand point up outline' },
+      { name: 'hand pointer' },
+      { name: 'hand pointer outline' },
+      { name: 'history' },
+      { name: 'level down alternate' },
+      { name: 'level up alternate' },
+      { name: 'location arrow' },
+      { name: 'long arrow alternate down' },
+      { name: 'long arrow alternate left' },
+      { name: 'long arrow alternate right' },
+      { name: 'long arrow alternate up' },
+      { name: 'mouse pointer' },
+      { name: 'play' },
+      { name: 'random' },
+      { name: 'recycle' },
+      { name: 'redo' },
+      { name: 'redo alternate' },
+      { name: 'reply' },
+      { name: 'reply all' },
+      { name: 'retweet' },
+      { name: 'share' },
+      { name: 'share square' },
+      { name: 'share square outline' },
+      'sign-in',
+      'sign-out',
+      'sign-in alternate',
+      'sign-out alternate',
+      { name: 'sort' },
+      { name: 'sort alphabet down' },
+      { name: 'sort alphabet up' },
+      { name: 'sort amount down' },
+      { name: 'sort amount up' },
+      { name: 'sort down' },
+      { name: 'sort numeric down' },
+      { name: 'sort numeric up' },
+      { name: 'sort up' },
+      { name: 'sync' },
+      { name: 'sync alternate' },
+      { name: 'text height' },
+      { name: 'text width' },
+      { name: 'undo' },
+      { name: 'undo alternate' },
+      { name: 'upload' },
+      'zoom-in',
+      'zoom-out',
+    ],
+  },
+  audioVideo: {
+    title: 'Audio & Video',
+    list: [
+      { name: 'audio description' },
+      { name: 'backward' },
+      { name: 'circle' },
+      { name: 'circle outline' },
+      { name: 'closed captioning' },
+      { name: 'closed captioning outline' },
+      { name: 'compress' },
+      { name: 'eject' },
+      { name: 'expand' },
+      { name: 'expand arrows alternate' },
+      { name: 'fast backward' },
+      { name: 'fast forward' },
+      { name: 'file audio' },
+      { name: 'file audio outline' },
+      { name: 'file video' },
+      { name: 'file video outline' },
+      { name: 'film' },
+      { name: 'forward' },
+      { name: 'headphones' },
+      { name: 'microphone' },
+      { name: 'microphone slash' },
+      { name: 'music' },
+      { name: 'pause' },
+      { name: 'pause circle' },
+      { name: 'pause circle outline' },
+      { name: 'phone volume' },
+      { name: 'play' },
+      { name: 'play circle' },
+      { name: 'play circle outline' },
+      { name: 'podcast' },
+      { name: 'random' },
+      { name: 'redo' },
+      { name: 'redo alternate' },
+      { name: 'rss' },
+      { name: 'rss square' },
+      { name: 'step backward' },
+      { name: 'step forward' },
+      { name: 'stop' },
+      { name: 'stop circle' },
+      { name: 'stop circle outline' },
+      { name: 'sync' },
+      { name: 'sync alternate' },
+      { name: 'undo' },
+      { name: 'undo alternate' },
+      { name: 'video' },
+      { name: 'volume down' },
+      { name: 'volume off' },
+      { name: 'volume up' },
+    ],
+  },
+  business: {
+    title: 'Business',
+    list: [
+      { name: 'address book' },
+      { name: 'address book outline' },
+      { name: 'address card' },
+      { name: 'address card outline' },
+      { name: 'archive' },
+      { name: 'balance scale' },
+      { name: 'birthday cake' },
+      { name: 'book' },
+      { name: 'briefcase' },
+      { name: 'building' },
+      { name: 'building outline' },
+      { name: 'bullhorn' },
+      { name: 'bullseye' },
+      { name: 'calculator' },
+      { name: 'calendar' },
+      { name: 'calendar outline' },
+      { name: 'calendar alternate' },
+      { name: 'calendar alternate outline' },
+      { name: 'certificate' },
+      { name: 'chart area' },
+      { name: 'chart bar' },
+      { name: 'chart bar outline' },
+      { name: 'chart line' },
+      { name: 'chart pie' },
+      { name: 'clipboard' },
+      { name: 'clipboard outline' },
+      { name: 'coffee' },
+      { name: 'columns' },
+      { name: 'compass' },
+      { name: 'compass outline' },
+      { name: 'copy' },
+      { name: 'copy outline' },
+      { name: 'copyright' },
+      { name: 'copyright outline' },
+      { name: 'cut' },
+      { name: 'edit' },
+      { name: 'edit outline' },
+      { name: 'envelope' },
+      { name: 'envelope outline' },
+      { name: 'envelope open' },
+      { name: 'envelope open outline' },
+      { name: 'envelope square' },
+      { name: 'eraser' },
+      { name: 'fax' },
+      { name: 'file' },
+      { name: 'file outline' },
+      { name: 'file alternate' },
+      { name: 'file alternate outline' },
+      { name: 'folder' },
+      { name: 'folder outline' },
+      { name: 'folder open' },
+      { name: 'folder open outline' },
+      { name: 'globe' },
+      { name: 'industry' },
+      { name: 'paperclip' },
+      { name: 'paste' },
+      { name: 'pen square' },
+      { name: 'pencil alternate' },
+      { name: 'percent' },
+      { name: 'phone' },
+      { name: 'phone square' },
+      { name: 'phone volume' },
+      { name: 'registered' },
+      { name: 'registered outline' },
+      { name: 'save' },
+      { name: 'save outline' },
+      { name: 'sitemap' },
+      { name: 'sticky note' },
+      { name: 'sticky note outline' },
+      { name: 'suitcase' },
+      { name: 'table' },
+      { name: 'tag' },
+      { name: 'tags' },
+      { name: 'tasks' },
+      { name: 'thumbtack' },
+      { name: 'trademark' },
+    ],
+  },
+  chess: {
+    title: 'Chess',
+    list: [
+      { name: 'chess' },
+      { name: 'chess bishop' },
+      { name: 'chess board' },
+      { name: 'chess king' },
+      { name: 'chess knight' },
+      { name: 'chess pawn' },
+      { name: 'chess queen' },
+      { name: 'chess rook' },
+      { name: 'square full' },
+    ],
+  },
+  code: {
+    title: 'Code',
+    list: [
+      { name: 'archive' },
+      { name: 'barcode' },
+      { name: 'bath' },
+      { name: 'bug' },
+      { name: 'code' },
+      { name: 'code branch' },
+      { name: 'coffee' },
+      { name: 'file' },
+      { name: 'file outline' },
+      { name: 'file alternate' },
+      { name: 'file alternate outline' },
+      { name: 'file code' },
+      { name: 'file code outline' },
+      { name: 'filter' },
+      { name: 'fire extinguisher' },
+      { name: 'folder' },
+      { name: 'folder outline' },
+      { name: 'folder open' },
+      { name: 'folder open outline' },
+      { name: 'keyboard' },
+      { name: 'keyboard outline' },
+      { name: 'microchip' },
+      { name: 'qrcode' },
+      { name: 'shield alternate' },
+      { name: 'sitemap' },
+      { name: 'terminal' },
+      { name: 'user secret' },
+      { name: 'window close' },
+      { name: 'window close outline' },
+      { name: 'window maximize' },
+      { name: 'window maximize outline' },
+      { name: 'window minimize' },
+      { name: 'window minimize outline' },
+      { name: 'window restore' },
+      { name: 'window restore outline' },
+    ],
+  },
+  communication: {
+    title: 'Communication',
+    list: [
+      { name: 'address book' },
+      { name: 'address book outline' },
+      { name: 'address card' },
+      { name: 'address card outline' },
+      { name: 'american sign language interpreting' },
+      { name: 'assistive listening systems' },
+      { name: 'at' },
+      { name: 'bell' },
+      { name: 'bell outline' },
+      { name: 'bell slash' },
+      { name: 'bell slash outline' },
+      { name: 'bullhorn' },
+      { name: 'comment' },
+      { name: 'comment outline' },
+      { name: 'comment alternate' },
+      { name: 'comment alternate outline' },
+      { name: 'comments' },
+      { name: 'comments outline' },
+      { name: 'envelope' },
+      { name: 'envelope outline' },
+      { name: 'envelope open' },
+      { name: 'envelope open outline' },
+      { name: 'envelope square' },
+      { name: 'fax' },
+      { name: 'inbox' },
+      { name: 'language' },
+      { name: 'microphone' },
+      { name: 'microphone slash' },
+      { name: 'mobile' },
+      { name: 'mobile alternate' },
+      { name: 'paper plane' },
+      { name: 'paper plane outline' },
+      { name: 'phone' },
+      { name: 'phone square' },
+      { name: 'phone volume' },
+      { name: 'rss' },
+      { name: 'rss square' },
+      { name: 'tty' },
+      { name: 'wifi' },
+    ],
+  },
+  computers: {
+    title: 'Computers',
+    list: [
+      { name: 'desktop' },
+      { name: 'download' },
+      { name: 'hdd' },
+      { name: 'hdd outline' },
+      { name: 'headphones' },
+      { name: 'keyboard' },
+      { name: 'keyboard outline' },
+      { name: 'laptop' },
+      { name: 'microchip' },
+      { name: 'mobile' },
+      { name: 'mobile alternate' },
+      { name: 'plug' },
+      { name: 'power off' },
+      { name: 'print' },
+      { name: 'save' },
+      { name: 'save outline' },
+      { name: 'server' },
+      { name: 'tablet' },
+      { name: 'tablet alternate' },
+      { name: 'tv' },
+      { name: 'upload' },
+    ],
+  },
+  currency: {
+    title: 'Currency',
+    list: [
+      { name: 'dollar sign' },
+      { name: 'euro sign' },
+      { name: 'lira sign' },
+      { name: 'money bill alternate' },
+      { name: 'money bill alternate outline' },
+      { name: 'pound sign' },
+      { name: 'ruble sign' },
+      { name: 'rupee sign' },
+      { name: 'shekel sign' },
+      { name: 'won sign' },
+      { name: 'yen sign' },
+    ],
+  },
+  dateTime: {
+    title: 'Date & Time',
+    list: [
+      { name: 'bell' },
+      { name: 'bell outline' },
+      { name: 'bell slash' },
+      { name: 'bell slash outline' },
+      { name: 'calendar' },
+      { name: 'calendar outline' },
+      { name: 'calendar alternate' },
+      { name: 'calendar alternate outline' },
+      { name: 'calendar check' },
+      { name: 'calendar check outline' },
+      { name: 'calendar minus' },
+      { name: 'calendar minus outline' },
+      { name: 'calendar plus' },
+      { name: 'calendar plus outline' },
+      { name: 'calendar times' },
+      { name: 'calendar times outline' },
+      { name: 'clock' },
+      { name: 'clock outline' },
+      { name: 'hourglass' },
+      { name: 'hourglass outline' },
+      { name: 'hourglass end' },
+      { name: 'hourglass half' },
+      { name: 'hourglass start' },
+      { name: 'stopwatch' },
+    ],
+  },
+  design: {
+    title: 'Design',
+    list: [
+      { name: 'adjust' },
+      { name: 'clone' },
+      { name: 'clone outline' },
+      { name: 'copy' },
+      { name: 'copy outline' },
+      { name: 'crop' },
+      { name: 'crosshairs' },
+      { name: 'cut' },
+      { name: 'edit' },
+      { name: 'edit outline' },
+      { name: 'eraser' },
+      { name: 'eye' },
+      { name: 'eye dropper' },
+      { name: 'eye slash' },
+      { name: 'eye slash outline' },
+      { name: 'object group' },
+      { name: 'object group outline' },
+      { name: 'object ungroup' },
+      { name: 'object ungroup outline' },
+      { name: 'paint brush' },
+      { name: 'paste' },
+      { name: 'pencil alternate' },
+      { name: 'save' },
+      { name: 'save outline' },
+      { name: 'tint' },
+    ],
+  },
+  editors: {
+    title: 'Editors',
+    list: [
+      { name: 'align center' },
+      { name: 'align justify' },
+      { name: 'align left' },
+      { name: 'align right' },
+      { name: 'bold' },
+      { name: 'clipboard' },
+      { name: 'clipboard outline' },
+      { name: 'clone' },
+      { name: 'clone outline' },
+      { name: 'columns' },
+      { name: 'copy' },
+      { name: 'copy outline' },
+      { name: 'cut' },
+      { name: 'edit' },
+      { name: 'edit outline' },
+      { name: 'eraser' },
+      { name: 'file' },
+      { name: 'file outline' },
+      { name: 'file alternate' },
+      { name: 'file alternate outline' },
+      { name: 'font' },
+      { name: 'heading' },
+      { name: 'i cursor' },
+      { name: 'indent' },
+      { name: 'italic' },
+      { name: 'linkify' },
+      { name: 'list' },
+      { name: 'list alternate' },
+      { name: 'list alternate outline' },
+      { name: 'list ol' },
+      { name: 'list ul' },
+      { name: 'outdent' },
+      { name: 'paper plane' },
+      { name: 'paper plane outline' },
+      { name: 'paperclip' },
+      { name: 'paragraph' },
+      { name: 'paste' },
+      { name: 'pencil alternate' },
+      { name: 'print' },
+      { name: 'quote left' },
+      { name: 'quote right' },
+      { name: 'redo' },
+      { name: 'redo alternate' },
+      { name: 'reply' },
+      { name: 'reply all' },
+      { name: 'share' },
+      { name: 'strikethrough' },
+      { name: 'subscript' },
+      { name: 'superscript' },
+      { name: 'sync' },
+      { name: 'sync alternate' },
+      { name: 'table' },
+      { name: 'tasks' },
+      { name: 'text height' },
+      { name: 'text width' },
+      { name: 'th' },
+      { name: 'th large' },
+      { name: 'th list' },
+      { name: 'trash' },
+      { name: 'trash alternate' },
+      { name: 'trash alternate outline' },
+      { name: 'underline' },
+      { name: 'undo' },
+      { name: 'undo alternate' },
+      { name: 'unlink' },
+    ],
+  },
+  files: {
+    title: 'Files',
+    list: [
+      { name: 'archive' },
+      { name: 'clone' },
+      { name: 'clone outline' },
+      { name: 'copy' },
+      { name: 'copy outline' },
+      { name: 'cut' },
+      { name: 'file' },
+      { name: 'file outline' },
+      { name: 'file alternate' },
+      { name: 'file alternate outline' },
+      { name: 'file archive' },
+      { name: 'file archive outline' },
+      { name: 'file audio' },
+      { name: 'file audio outline' },
+      { name: 'file code' },
+      { name: 'file code outline' },
+      { name: 'file excel' },
+      { name: 'file excel outline' },
+      { name: 'file image' },
+      { name: 'file image outline' },
+      { name: 'file pdf' },
+      { name: 'file pdf outline' },
+      { name: 'file powerpoint' },
+      { name: 'file powerpoint outline' },
+      { name: 'file video' },
+      { name: 'file video outline' },
+      { name: 'file word' },
+      { name: 'file word outline' },
+      { name: 'folder' },
+      { name: 'folder outline' },
+      { name: 'folder open' },
+      { name: 'folder open outline' },
+      { name: 'paste' },
+      { name: 'save' },
+      { name: 'save outline' },
+      { name: 'sticky note' },
+      { name: 'sticky note outline' },
+    ],
+  },
+  genders: {
+    title: 'Genders',
+    list: [
+      { name: 'genderless' },
+      { name: 'mars' },
+      { name: 'mars double' },
+      { name: 'mars stroke' },
+      { name: 'mars stroke horizontal' },
+      { name: 'mars stroke vertical' },
+      { name: 'mercury' },
+      { name: 'neuter' },
+      { name: 'transgender' },
+      { name: 'transgender alternate' },
+      { name: 'venus' },
+      { name: 'venus double' },
+      { name: 'venus mars' },
+    ],
+  },
+  handsGestures: {
+    title: 'Hands & Gestures',
+    list: [
+      { name: 'hand lizard' },
+      { name: 'hand lizard outline' },
+      { name: 'hand paper' },
+      { name: 'hand paper outline' },
+      { name: 'hand peace' },
+      { name: 'hand peace outline' },
+      { name: 'hand point down' },
+      { name: 'hand point down outline' },
+      { name: 'hand point left' },
+      { name: 'hand point left outline' },
+      { name: 'hand point right' },
+      { name: 'hand point right outline' },
+      { name: 'hand point up' },
+      { name: 'hand point up outline' },
+      { name: 'hand pointer' },
+      { name: 'hand pointer outline' },
+      { name: 'hand rock' },
+      { name: 'hand rock outline' },
+      { name: 'hand scissors' },
+      { name: 'hand scissors outline' },
+      { name: 'hand spock' },
+      { name: 'hand spock outline' },
+      { name: 'handshake' },
+      { name: 'handshake outline' },
+      { name: 'thumbs down' },
+      { name: 'thumbs down outline' },
+      { name: 'thumbs up' },
+      { name: 'thumbs up outline' },
+    ],
+  },
+  health: {
+    title: 'Health',
+    list: [
+      { name: 'ambulance' },
+      { name: 'h square' },
+      { name: 'heart' },
+      { name: 'heart outline' },
+      { name: 'heartbeat' },
+      { name: 'hospital' },
+      { name: 'hospital outline' },
+      { name: 'medkit' },
+      { name: 'plus square' },
+      { name: 'plus square outline' },
+      { name: 'stethoscope' },
+      { name: 'user md' },
+      { name: 'wheelchair' },
+    ],
+  },
+  images: {
+    title: 'Images',
+    list: [
+      { name: 'adjust' },
+      { name: 'bolt' },
+      { name: 'camera' },
+      { name: 'camera retro' },
+      { name: 'clone' },
+      { name: 'clone outline' },
+      { name: 'compress' },
+      { name: 'expand' },
+      { name: 'eye' },
+      { name: 'eye dropper' },
+      { name: 'eye slash' },
+      { name: 'eye slash outline' },
+      { name: 'file image' },
+      { name: 'file image outline' },
+      { name: 'film' },
+      { name: 'id badge' },
+      { name: 'id badge outline' },
+      { name: 'id card' },
+      { name: 'id card outline' },
+      { name: 'image' },
+      { name: 'image outline' },
+      { name: 'images' },
+      { name: 'images outline' },
+      { name: 'sliders horizontal' },
+      { name: 'tint' },
+    ],
+  },
+  interfaces: {
+    title: 'Interfaces',
+    list: [
+      { name: 'ban' },
+      { name: 'barcode' },
+      { name: 'bars' },
+      { name: 'beer' },
+      { name: 'bell' },
+      { name: 'bell outline' },
+      { name: 'bell slash' },
+      { name: 'bell slash outline' },
+      { name: 'bug' },
+      { name: 'bullhorn' },
+      { name: 'bullseye' },
+      { name: 'calculator' },
+      { name: 'calendar' },
+      { name: 'calendar outline' },
+      { name: 'calendar alternate' },
+      { name: 'calendar alternate outline' },
+      { name: 'calendar check' },
+      { name: 'calendar check outline' },
+      { name: 'calendar minus' },
+      { name: 'calendar minus outline' },
+      { name: 'calendar plus' },
+      { name: 'calendar plus outline' },
+      { name: 'calendar times' },
+      { name: 'calendar times outline' },
+      { name: 'certificate' },
+      { name: 'check' },
+      { name: 'check circle' },
+      { name: 'check circle outline' },
+      { name: 'check square' },
+      { name: 'check square outline' },
+      { name: 'circle' },
+      { name: 'circle outline' },
+      { name: 'clipboard' },
+      { name: 'clipboard outline' },
+      { name: 'clone' },
+      { name: 'clone outline' },
+      { name: 'cloud' },
+      { name: 'cloud download' },
+      { name: 'cloud upload' },
+      { name: 'coffee' },
+      { name: 'cog' },
+      { name: 'cogs' },
+      { name: 'copy' },
+      { name: 'copy outline' },
+      { name: 'cut' },
+      { name: 'database' },
+      { name: 'dot circle' },
+      { name: 'dot circle outline' },
+      { name: 'download' },
+      { name: 'edit' },
+      { name: 'edit outline' },
+      { name: 'ellipsis horizontal' },
+      { name: 'ellipsis vertical' },
+      { name: 'envelope' },
+      { name: 'envelope outline' },
+      { name: 'envelope open' },
+      { name: 'envelope open outline' },
+      { name: 'eraser' },
+      { name: 'exclamation' },
+      { name: 'exclamation circle' },
+      { name: 'exclamation triangle' },
+      { name: 'external alternate' },
+      { name: 'external square alternate' },
+      { name: 'eye' },
+      { name: 'eye slash' },
+      { name: 'eye slash outline' },
+      { name: 'file' },
+      { name: 'file outline' },
+      { name: 'file alternate' },
+      { name: 'file alternate outline' },
+      { name: 'filter' },
+      { name: 'flag' },
+      { name: 'flag outline' },
+      { name: 'flag checkered' },
+      { name: 'folder' },
+      { name: 'folder outline' },
+      { name: 'folder open' },
+      { name: 'folder open outline' },
+      { name: 'frown' },
+      { name: 'frown outline' },
+      { name: 'hashtag' },
+      { name: 'heart' },
+      { name: 'heart outline' },
+      { name: 'history' },
+      { name: 'home' },
+      { name: 'i cursor' },
+      { name: 'info' },
+      { name: 'info circle' },
+      { name: 'language' },
+      { name: 'magic' },
+      { name: 'meh' },
+      { name: 'meh outline' },
+      { name: 'microphone' },
+      { name: 'microphone slash' },
+      { name: 'minus' },
+      { name: 'minus circle' },
+      { name: 'minus square' },
+      { name: 'minus square outline' },
+      { name: 'paste' },
+      { name: 'pencil alternate' },
+      { name: 'plus' },
+      { name: 'plus circle' },
+      { name: 'plus square' },
+      { name: 'plus square outline' },
+      { name: 'qrcode' },
+      { name: 'question' },
+      { name: 'question circle' },
+      { name: 'question circle outline' },
+      { name: 'quote left' },
+      { name: 'quote right' },
+      { name: 'redo' },
+      { name: 'redo alternate' },
+      { name: 'reply' },
+      { name: 'reply all' },
+      { name: 'rss' },
+      { name: 'rss square' },
+      { name: 'save' },
+      { name: 'save outline' },
+      { name: 'search' },
+      { name: 'search minus' },
+      { name: 'search plus' },
+      { name: 'share' },
+      { name: 'share alternate' },
+      { name: 'share alternate square' },
+      { name: 'share square' },
+      { name: 'share square outline' },
+      { name: 'shield alternate' },
+      'sign-in',
+      'sign-out',
+      { name: 'signal' },
+      { name: 'sitemap' },
+      { name: 'sliders horizontal' },
+      { name: 'smile' },
+      { name: 'smile outline' },
+      { name: 'sort' },
+      { name: 'sort alphabet down' },
+      { name: 'sort alphabet up' },
+      { name: 'sort amount down' },
+      { name: 'sort amount up' },
+      { name: 'sort down' },
+      { name: 'sort numeric down' },
+      { name: 'sort numeric up' },
+      { name: 'sort up' },
+      { name: 'star' },
+      { name: 'star outline' },
+      { name: 'star half' },
+      { name: 'star half outline' },
+      { name: 'sync' },
+      { name: 'sync alternate' },
+      { name: 'thumbs down' },
+      { name: 'thumbs down outline' },
+      { name: 'thumbs up' },
+      { name: 'thumbs up outline' },
+      { name: 'times' },
+      { name: 'times circle' },
+      { name: 'times circle outline' },
+      { name: 'toggle off' },
+      { name: 'toggle on' },
+      { name: 'trash' },
+      { name: 'trash alternate' },
+      { name: 'trash alternate outline' },
+      { name: 'trophy' },
+      { name: 'undo' },
+      { name: 'undo alternate' },
+      { name: 'upload' },
+      { name: 'user' },
+      { name: 'user outline' },
+      { name: 'user circle' },
+      { name: 'user circle outline' },
+      { name: 'wifi' },
+    ],
+  },
+  logistics: {
+    title: 'Logistics',
+    list: [
+      { name: 'box' },
+      { name: 'boxes' },
+      { name: 'clipboard check' },
+      { name: 'clipboard list' },
+      { name: 'dolly' },
+      { name: 'dolly flatbed' },
+      { name: 'pallet' },
+      { name: 'shipping fast' },
+      { name: 'truck' },
+      { name: 'warehouse' },
+    ],
+  },
+  maps: {
+    title: 'Maps',
+    list: [
+      { name: 'ambulance' },
+      { name: 'anchor' },
+      { name: 'balance scale' },
+      { name: 'bath' },
+      { name: 'bed' },
+      { name: 'beer' },
+      { name: 'bell' },
+      { name: 'bell outline' },
+      { name: 'bell slash' },
+      { name: 'bell slash outline' },
+      { name: 'bicycle' },
+      { name: 'binoculars' },
+      { name: 'birthday cake' },
+      { name: 'blind' },
+      { name: 'bomb' },
+      { name: 'book' },
+      { name: 'bookmark' },
+      { name: 'bookmark outline' },
+      { name: 'briefcase' },
+      { name: 'building' },
+      { name: 'building outline' },
+      { name: 'car' },
+      { name: 'coffee' },
+      { name: 'crosshairs' },
+      { name: 'dollar sign' },
+      { name: 'eye' },
+      { name: 'eye slash' },
+      { name: 'eye slash outline' },
+      { name: 'fighter jet' },
+      { name: 'fire' },
+      { name: 'fire extinguisher' },
+      { name: 'flag' },
+      { name: 'flag outline' },
+      { name: 'flag checkered' },
+      { name: 'flask' },
+      { name: 'gamepad' },
+      { name: 'gavel' },
+      { name: 'gift' },
+      { name: 'glass martini' },
+      { name: 'globe' },
+      { name: 'graduation cap' },
+      { name: 'h square' },
+      { name: 'heart' },
+      { name: 'heart outline' },
+      { name: 'heartbeat' },
+      { name: 'home' },
+      { name: 'hospital' },
+      { name: 'hospital outline' },
+      { name: 'image' },
+      { name: 'image outline' },
+      { name: 'images' },
+      { name: 'images outline' },
+      { name: 'industry' },
+      { name: 'info' },
+      { name: 'info circle' },
+      { name: 'key' },
+      { name: 'leaf' },
+      { name: 'lemon' },
+      { name: 'lemon outline' },
+      { name: 'life ring' },
+      { name: 'life ring outline' },
+      { name: 'lightbulb' },
+      { name: 'lightbulb outline' },
+      { name: 'location arrow' },
+      { name: 'low vision' },
+      { name: 'magnet' },
+      { name: 'male' },
+      { name: 'map' },
+      { name: 'map outline' },
+      { name: 'map marker' },
+      { name: 'map marker alternate' },
+      { name: 'map pin' },
+      { name: 'map signs' },
+      { name: 'medkit' },
+      { name: 'money bill alternate' },
+      { name: 'money bill alternate outline' },
+      { name: 'motorcycle' },
+      { name: 'music' },
+      { name: 'newspaper' },
+      { name: 'newspaper outline' },
+      { name: 'paw' },
+      { name: 'phone' },
+      { name: 'phone square' },
+      { name: 'phone volume' },
+      { name: 'plane' },
+      { name: 'plug' },
+      { name: 'plus' },
+      { name: 'plus square' },
+      { name: 'plus square outline' },
+      { name: 'print' },
+      { name: 'recycle' },
+      { name: 'road' },
+      { name: 'rocket' },
+      { name: 'search' },
+      { name: 'search minus' },
+      { name: 'search plus' },
+      { name: 'ship' },
+      { name: 'shopping bag' },
+      { name: 'shopping basket' },
+      { name: 'shopping cart' },
+      { name: 'shower' },
+      { name: 'street view' },
+      { name: 'subway' },
+      { name: 'suitcase' },
+      { name: 'tag' },
+      { name: 'tags' },
+      { name: 'taxi' },
+      { name: 'thumbtack' },
+      { name: 'ticket alternate' },
+      { name: 'tint' },
+      { name: 'train' },
+      { name: 'tree' },
+      { name: 'trophy' },
+      { name: 'truck' },
+      { name: 'tty' },
+      { name: 'umbrella' },
+      { name: 'university' },
+      { name: 'utensil spoon' },
+      { name: 'utensils' },
+      { name: 'wheelchair' },
+      { name: 'wifi' },
+      { name: 'wrench' },
+    ],
+  },
+  medical: {
+    title: 'Medical',
+    list: [
+      { name: 'ambulance' },
+      { name: 'band aid' },
+      { name: 'dna' },
+      { name: 'first aid' },
+      { name: 'heart' },
+      { name: 'heart outline' },
+      { name: 'heartbeat' },
+      { name: 'hospital' },
+      { name: 'hospital outline' },
+      { name: 'hospital symbol' },
+      { name: 'pills' },
+      { name: 'plus' },
+      { name: 'stethoscope' },
+      { name: 'syringe' },
+      { name: 'thermometer' },
+      { name: 'user md' },
+      { name: 'weight' },
+    ],
+  },
+  objects: {
+    title: 'Objects',
+    list: [
+      { name: 'ambulance' },
+      { name: 'anchor' },
+      { name: 'archive' },
+      { name: 'balance scale' },
+      { name: 'bath' },
+      { name: 'bed' },
+      { name: 'beer' },
+      { name: 'bell' },
+      { name: 'bell outline' },
+      { name: 'bicycle' },
+      { name: 'binoculars' },
+      { name: 'birthday cake' },
+      { name: 'bomb' },
+      { name: 'book' },
+      { name: 'bookmark' },
+      { name: 'bookmark outline' },
+      { name: 'briefcase' },
+      { name: 'bug' },
+      { name: 'building' },
+      { name: 'building outline' },
+      { name: 'bullhorn' },
+      { name: 'bullseye' },
+      { name: 'bus' },
+      { name: 'calculator' },
+      { name: 'calendar' },
+      { name: 'calendar outline' },
+      { name: 'calendar alternate' },
+      { name: 'calendar alternate outline' },
+      { name: 'camera' },
+      { name: 'camera retro' },
+      { name: 'car' },
+      { name: 'clipboard' },
+      { name: 'clipboard outline' },
+      { name: 'cloud' },
+      { name: 'coffee' },
+      { name: 'cog' },
+      { name: 'cogs' },
+      { name: 'compass' },
+      { name: 'compass outline' },
+      { name: 'copy' },
+      { name: 'copy outline' },
+      { name: 'cube' },
+      { name: 'cubes' },
+      { name: 'cut' },
+      { name: 'envelope' },
+      { name: 'envelope outline' },
+      { name: 'envelope open' },
+      { name: 'envelope open outline' },
+      { name: 'eraser' },
+      { name: 'eye' },
+      { name: 'eye dropper' },
+      { name: 'fax' },
+      { name: 'fighter jet' },
+      { name: 'file' },
+      { name: 'file outline' },
+      { name: 'file alternate' },
+      { name: 'file alternate outline' },
+      { name: 'film' },
+      { name: 'fire' },
+      { name: 'fire extinguisher' },
+      { name: 'flag' },
+      { name: 'flag outline' },
+      { name: 'flag checkered' },
+      { name: 'flask' },
+      { name: 'futbol' },
+      { name: 'futbol outline' },
+      { name: 'gamepad' },
+      { name: 'gavel' },
+      { name: 'gem' },
+      { name: 'gem outline' },
+      { name: 'gift' },
+      { name: 'glass martini' },
+      { name: 'globe' },
+      { name: 'graduation cap' },
+      { name: 'hdd' },
+      { name: 'hdd outline' },
+      { name: 'headphones' },
+      { name: 'heart' },
+      { name: 'heart outline' },
+      { name: 'home' },
+      { name: 'hospital' },
+      { name: 'hospital outline' },
+      { name: 'hourglass' },
+      { name: 'hourglass outline' },
+      { name: 'image' },
+      { name: 'image outline' },
+      { name: 'images' },
+      { name: 'images outline' },
+      { name: 'industry' },
+      { name: 'key' },
+      { name: 'keyboard' },
+      { name: 'keyboard outline' },
+      { name: 'laptop' },
+      { name: 'leaf' },
+      { name: 'lemon' },
+      { name: 'lemon outline' },
+      { name: 'life ring' },
+      { name: 'life ring outline' },
+      { name: 'lightbulb' },
+      { name: 'lightbulb outline' },
+      { name: 'lock' },
+      { name: 'lock open' },
+      { name: 'magic' },
+      { name: 'magnet' },
+      { name: 'map' },
+      { name: 'map outline' },
+      { name: 'map marker' },
+      { name: 'map marker alternate' },
+      { name: 'map pin' },
+      { name: 'map signs' },
+      { name: 'medkit' },
+      { name: 'microchip' },
+      { name: 'microphone' },
+      { name: 'mobile' },
+      { name: 'mobile alternate' },
+      { name: 'money bill alternate' },
+      { name: 'money bill alternate outline' },
+      { name: 'moon' },
+      { name: 'moon outline' },
+      { name: 'motorcycle' },
+      { name: 'newspaper' },
+      { name: 'newspaper outline' },
+      { name: 'paint brush' },
+      { name: 'paper plane' },
+      { name: 'paper plane outline' },
+      { name: 'paperclip' },
+      { name: 'paste' },
+      { name: 'paw' },
+      { name: 'pencil alternate' },
+      { name: 'phone' },
+      { name: 'plane' },
+      { name: 'plug' },
+      { name: 'print' },
+      { name: 'puzzle piece' },
+      { name: 'road' },
+      { name: 'rocket' },
+      { name: 'save' },
+      { name: 'save outline' },
+      { name: 'search' },
+      { name: 'shield alternate' },
+      { name: 'shopping bag' },
+      { name: 'shopping basket' },
+      { name: 'shopping cart' },
+      { name: 'shower' },
+      { name: 'snowflake' },
+      { name: 'snowflake outline' },
+      { name: 'space shuttle' },
+      { name: 'star' },
+      { name: 'star outline' },
+      { name: 'sticky note' },
+      { name: 'sticky note outline' },
+      { name: 'stopwatch' },
+      { name: 'subway' },
+      { name: 'suitcase' },
+      { name: 'sun' },
+      { name: 'sun outline' },
+      { name: 'tablet' },
+      { name: 'tablet alternate' },
+      { name: 'tachometer alternate' },
+      { name: 'tag' },
+      { name: 'tags' },
+      { name: 'taxi' },
+      { name: 'thumbtack' },
+      { name: 'ticket alternate' },
+      { name: 'train' },
+      { name: 'trash' },
+      { name: 'trash alternate' },
+      { name: 'trash alternate outline' },
+      { name: 'tree' },
+      { name: 'trophy' },
+      { name: 'truck' },
+      { name: 'tv' },
+      { name: 'umbrella' },
+      { name: 'university' },
+      { name: 'unlock' },
+      { name: 'unlock alternate' },
+      { name: 'utensil spoon' },
+      { name: 'utensils' },
+      { name: 'wheelchair' },
+      { name: 'wrench' },
+    ],
+  },
+  paymentsShopping: {
+    title: 'Payments & Shopping',
+    list: [
+      { name: 'bell' },
+      { name: 'bell outline' },
+      { name: 'bookmark' },
+      { name: 'bookmark outline' },
+      { name: 'bullhorn' },
+      { name: 'camera' },
+      { name: 'camera retro' },
+      { name: 'cart arrow down' },
+      { name: 'cart plus' },
+      { name: 'certificate' },
+      { name: 'credit card' },
+      { name: 'credit card outline' },
+      { name: 'gem' },
+      { name: 'gem outline' },
+      { name: 'gift' },
+      { name: 'handshake' },
+      { name: 'handshake outline' },
+      { name: 'heart' },
+      { name: 'heart outline' },
+      { name: 'key' },
+      { name: 'shopping bag' },
+      { name: 'shopping basket' },
+      { name: 'shopping cart' },
+      { name: 'star' },
+      { name: 'star outline' },
+      { name: 'tag' },
+      { name: 'tags' },
+      { name: 'thumbs down' },
+      { name: 'thumbs down outline' },
+      { name: 'thumbs up' },
+      { name: 'thumbs up outline' },
+      { name: 'trophy' },
+    ],
+  },
+  shapes: {
+    title: 'Shapes',
+    list: [
+      { name: 'bookmark' },
+      { name: 'bookmark outline' },
+      { name: 'calendar' },
+      { name: 'calendar outline' },
+      { name: 'certificate' },
+      { name: 'circle' },
+      { name: 'circle outline' },
+      { name: 'cloud' },
+      { name: 'comment' },
+      { name: 'comment outline' },
+      { name: 'file' },
+      { name: 'file outline' },
+      { name: 'folder' },
+      { name: 'folder outline' },
+      { name: 'heart' },
+      { name: 'heart outline' },
+      { name: 'map marker' },
+      { name: 'play' },
+      { name: 'square' },
+      { name: 'square outline' },
+      { name: 'star' },
+      { name: 'star outline' },
+    ],
+  },
+  spinners: {
+    title: 'Spinners',
+    list: [
+      { name: 'asterisk' },
+      { name: 'certificate' },
+      { name: 'circle notch' },
+      { name: 'cog' },
+      { name: 'compass' },
+      { name: 'compass outline' },
+      { name: 'crosshairs' },
+      { name: 'life ring' },
+      { name: 'life ring outline' },
+      { name: 'snowflake' },
+      { name: 'snowflake outline' },
+      { name: 'spinner' },
+      { name: 'sun' },
+      { name: 'sun outline' },
+      { name: 'sync' },
+    ],
+  },
+  sports: {
+    title: 'Sports',
+    list: [
+      { name: 'baseball ball' },
+      { name: 'basketball ball' },
+      { name: 'bowling ball' },
+      { name: 'football ball' },
+      { name: 'futbol' },
+      { name: 'futbol outline' },
+      { name: 'golf ball' },
+      { name: 'hockey puck' },
+      { name: 'quidditch' },
+      { name: 'table tennis' },
+      { name: 'volleyball ball' },
+    ],
+  },
+  status: {
+    title: 'Status',
+    list: [
+      { name: 'ban' },
+      { name: 'battery empty' },
+      { name: 'battery full' },
+      { name: 'battery half' },
+      { name: 'battery quarter' },
+      { name: 'battery three quarters' },
+      { name: 'bell' },
+      { name: 'bell outline' },
+      { name: 'bell slash' },
+      { name: 'bell slash outline' },
+      { name: 'calendar' },
+      { name: 'calendar outline' },
+      { name: 'calendar alternate' },
+      { name: 'calendar alternate outline' },
+      { name: 'calendar check' },
+      { name: 'calendar check outline' },
+      { name: 'calendar minus' },
+      { name: 'calendar minus outline' },
+      { name: 'calendar plus' },
+      { name: 'calendar plus outline' },
+      { name: 'calendar times' },
+      { name: 'calendar times outline' },
+      { name: 'cart arrow down' },
+      { name: 'cart plus' },
+      { name: 'exclamation' },
+      { name: 'exclamation circle' },
+      { name: 'exclamation triangle' },
+      { name: 'eye' },
+      { name: 'eye slash' },
+      { name: 'eye slash outline' },
+      { name: 'file' },
+      { name: 'file outline' },
+      { name: 'file alternate' },
+      { name: 'file alternate outline' },
+      { name: 'folder' },
+      { name: 'folder outline' },
+      { name: 'folder open' },
+      { name: 'folder open outline' },
+      { name: 'info' },
+      { name: 'info circle' },
+      { name: 'lock' },
+      { name: 'lock open' },
+      { name: 'minus' },
+      { name: 'minus circle' },
+      { name: 'minus square' },
+      { name: 'minus square outline' },
+      { name: 'plus' },
+      { name: 'plus circle' },
+      { name: 'plus square' },
+      { name: 'plus square outline' },
+      { name: 'question' },
+      { name: 'question circle' },
+      { name: 'question circle outline' },
+      { name: 'shield alternate' },
+      { name: 'shopping cart' },
+      { name: 'sign in alternate' },
+      { name: 'sign out alternate' },
+      { name: 'thermometer empty' },
+      { name: 'thermometer full' },
+      { name: 'thermometer half' },
+      { name: 'thermometer quarter' },
+      { name: 'thermometer three quarters' },
+      { name: 'thumbs down' },
+      { name: 'thumbs down outline' },
+      { name: 'thumbs up' },
+      { name: 'thumbs up outline' },
+      { name: 'toggle off' },
+      { name: 'toggle on' },
+      { name: 'unlock' },
+      { name: 'unlock alternate' },
+    ],
+  },
+  usersPeople: {
+    title: 'Users & People',
+    list: [
+      { name: 'address book' },
+      { name: 'address book outline' },
+      { name: 'address card' },
+      { name: 'address card outline' },
+      { name: 'bed' },
+      { name: 'blind' },
+      { name: 'child' },
+      { name: 'female' },
+      { name: 'frown' },
+      { name: 'frown outline' },
+      { name: 'id badge' },
+      { name: 'id badge outline' },
+      { name: 'id card' },
+      { name: 'id card outline' },
+      { name: 'male' },
+      { name: 'meh' },
+      { name: 'meh outline' },
+      { name: 'power off' },
+      { name: 'smile' },
+      { name: 'smile outline' },
+      { name: 'street view' },
+      { name: 'user' },
+      { name: 'user outline' },
+      { name: 'user circle' },
+      { name: 'user circle outline' },
+      { name: 'user md' },
+      { name: 'user plus' },
+      { name: 'user secret' },
+      { name: 'user times' },
+      { name: 'users' },
+      { name: 'wheelchair' },
+    ],
+  },
+  vehicles: {
+    title: 'Vehicles',
+    list: [
+      { name: 'ambulance' },
+      { name: 'bicycle' },
+      { name: 'bus' },
+      { name: 'car' },
+      { name: 'fighter jet' },
+      { name: 'motorcycle' },
+      { name: 'paper plane' },
+      { name: 'paper plane outline' },
+      { name: 'plane' },
+      { name: 'rocket' },
+      { name: 'ship' },
+      { name: 'shopping cart' },
+      { name: 'space shuttle' },
+      { name: 'subway' },
+      { name: 'taxi' },
+      { name: 'train' },
+      { name: 'truck' },
+      { name: 'wheelchair' },
+    ],
+  },
+  writing: {
+    title: 'Writing',
+    list: [
+      { name: 'archive' },
+      { name: 'book' },
+      { name: 'bookmark' },
+      { name: 'bookmark outline' },
+      { name: 'edit' },
+      { name: 'edit outline' },
+      { name: 'envelope' },
+      { name: 'envelope outline' },
+      { name: 'envelope open' },
+      { name: 'envelope open outline' },
+      { name: 'eraser' },
+      { name: 'file' },
+      { name: 'file outline' },
+      { name: 'file alternate' },
+      { name: 'file alternate outline' },
+      { name: 'folder' },
+      { name: 'folder outline' },
+      { name: 'folder open' },
+      { name: 'folder open outline' },
+      { name: 'keyboard' },
+      { name: 'keyboard outline' },
+      { name: 'newspaper' },
+      { name: 'newspaper outline' },
+      { name: 'paper plane' },
+      { name: 'paper plane outline' },
+      { name: 'paperclip' },
+      { name: 'paragraph' },
+      { name: 'pen square' },
+      { name: 'pencil alternate' },
+      { name: 'quote left' },
+      { name: 'quote right' },
+      { name: 'sticky note' },
+      { name: 'sticky note outline' },
+      { name: 'thumbtack' },
+    ],
+  },
+  brands: {
+    title: 'Brands',
+    list: [
+      '500px',
+      { name: 'accessible' },
+      { name: 'accusoft' },
+      { name: 'adn' },
+      { name: 'adversal' },
+      { name: 'affiliatetheme' },
+      { name: 'algolia' },
+      { name: 'amazon' },
+      { name: 'amazon pay' },
+      { name: 'amilia' },
+      { name: 'android' },
+      { name: 'angellist' },
+      { name: 'angrycreative' },
+      { name: 'angular' },
+      { name: 'app store' },
+      { name: 'app store ios' },
+      { name: 'apper' },
+      { name: 'apple' },
+      { name: 'apple pay' },
+      { name: 'asymmetrik' },
+      { name: 'audible' },
+      { name: 'autoprefixer' },
+      { name: 'avianex' },
+      { name: 'aviato' },
+      { name: 'aws' },
+      { name: 'bandcamp' },
+      { name: 'behance' },
+      { name: 'behance square' },
+      { name: 'bimobject' },
+      { name: 'bitbucket' },
+      { name: 'bitcoin' },
+      { name: 'bity' },
+      { name: 'black tie' },
+      { name: 'blackberry' },
+      { name: 'blogger' },
+      { name: 'blogger b' },
+      { name: 'bluetooth' },
+      { name: 'bluetooth b' },
+      { name: 'btc' },
+      { name: 'buromobelexperte' },
+      { name: 'buysellads' },
+      { name: 'cc amazon pay' },
+      { name: 'cc amex' },
+      { name: 'cc apple pay' },
+      { name: 'cc diners club' },
+      { name: 'cc discover' },
+      { name: 'cc jcb' },
+      { name: 'cc mastercard' },
+      { name: 'cc paypal' },
+      { name: 'cc stripe' },
+      { name: 'cc visa' },
+      { name: 'centercode' },
+      { name: 'chrome' },
+      { name: 'cloudscale' },
+      { name: 'cloudsmith' },
+      { name: 'cloudversify' },
+      { name: 'codepen' },
+      { name: 'codiepie' },
+      { name: 'connectdevelop' },
+      { name: 'contao' },
+      { name: 'cpanel' },
+      { name: 'creative commons' },
+      'css3',
+      'css3 alternate',
+      { name: 'cuttlefish' },
+      { name: 'd and d' },
+      { name: 'dashcube' },
+      { name: 'delicious' },
+      { name: 'deploydog' },
+      { name: 'deskpro' },
+      { name: 'deviantart' },
+      { name: 'digg' },
+      { name: 'digital ocean' },
+      { name: 'discord' },
+      { name: 'discourse' },
+      { name: 'dochub' },
+      { name: 'docker' },
+      'draft2digital',
+      { name: 'dribbble' },
+      { name: 'dribbble square' },
+      { name: 'dropbox' },
+      { name: 'drupal' },
+      { name: 'dyalog' },
+      { name: 'earlybirds' },
+      { name: 'edge' },
+      { name: 'elementor' },
+      { name: 'ember' },
+      { name: 'empire' },
+      { name: 'envira' },
+      { name: 'erlang' },
+      { name: 'ethereum' },
+      { name: 'etsy' },
+      { name: 'expeditedssl' },
+      { name: 'facebook' },
+      { name: 'facebook f' },
+      { name: 'facebook messenger' },
+      { name: 'facebook square' },
+      { name: 'firefox' },
+      { name: 'first order' },
+      { name: 'firstdraft' },
+      { name: 'flickr' },
+      { name: 'flipboard' },
+      { name: 'fly' },
+      { name: 'font awesome' },
+      { name: 'font awesome alternate' },
+      { name: 'font awesome flag' },
+      { name: 'fonticons' },
+      { name: 'fonticons fi' },
+      { name: 'fort awesome' },
+      { name: 'fort awesome alternate' },
+      { name: 'forumbee' },
+      { name: 'foursquare' },
+      { name: 'free code camp' },
+      { name: 'freebsd' },
+      { name: 'get pocket' },
+      { name: 'gg' },
+      { name: 'gg circle' },
+      { name: 'git' },
+      { name: 'git square' },
+      { name: 'github' },
+      { name: 'github alternate' },
+      { name: 'github square' },
+      { name: 'gitkraken' },
+      { name: 'gitlab' },
+      { name: 'gitter' },
+      { name: 'glide' },
+      { name: 'glide g' },
+      { name: 'gofore' },
+      { name: 'goodreads' },
+      { name: 'goodreads g' },
+      { name: 'google' },
+      { name: 'google drive' },
+      { name: 'google play' },
+      { name: 'google plus' },
+      { name: 'google plus g' },
+      { name: 'google plus square' },
+      { name: 'google wallet' },
+      { name: 'gratipay' },
+      { name: 'grav' },
+      { name: 'gripfire' },
+      { name: 'grunt' },
+      { name: 'gulp' },
+      { name: 'hacker news' },
+      { name: 'hacker news square' },
+      { name: 'hips' },
+      { name: 'hire a helper' },
+      { name: 'hooli' },
+      { name: 'hotjar' },
+      { name: 'houzz' },
+      'html5',
+      { name: 'hubspot' },
+      { name: 'imdb' },
+      { name: 'instagram' },
+      { name: 'internet explorer' },
+      { name: 'ioxhost' },
+      { name: 'itunes' },
+      { name: 'itunes note' },
+      { name: 'jenkins' },
+      { name: 'joget' },
+      { name: 'joomla' },
+      { name: 'js' },
+      { name: 'js square' },
+      { name: 'jsfiddle' },
+      { name: 'keycdn' },
+      { name: 'kickstarter' },
+      { name: 'kickstarter k' },
+      { name: 'korvue' },
+      { name: 'laravel' },
+      { name: 'lastfm' },
+      { name: 'lastfm square' },
+      { name: 'leanpub' },
+      { name: 'less' },
+      { name: 'linechat' },
+      { name: 'linkedin' },
+      { name: 'linkedin alternate' },
+      { name: 'linode' },
+      { name: 'linux' },
+      { name: 'lyft' },
+      { name: 'magento' },
+      { name: 'maxcdn' },
+      { name: 'medapps' },
+      { name: 'medium' },
+      { name: 'medium m' },
+      { name: 'medrt' },
+      { name: 'meetup' },
+      { name: 'microsoft' },
+      { name: 'mix' },
+      { name: 'mixcloud' },
+      { name: 'mizuni' },
+      { name: 'modx' },
+      { name: 'monero' },
+      { name: 'napster' },
+      { name: 'nintendo switch' },
+      { name: 'node' },
+      { name: 'node js' },
+      { name: 'npm' },
+      'ns8',
+      { name: 'nutritionix' },
+      { name: 'odnoklassniki' },
+      { name: 'odnoklassniki square' },
+      { name: 'opencart' },
+      { name: 'openid' },
+      { name: 'opera' },
+      { name: 'optin monster' },
+      { name: 'osi' },
+      'page4',
+      { name: 'pagelines' },
+      { name: 'palfed' },
+      { name: 'patreon' },
+      { name: 'paypal' },
+      { name: 'periscope' },
+      { name: 'phabricator' },
+      { name: 'phoenix framework' },
+      { name: 'php' },
+      { name: 'pied piper' },
+      { name: 'pied piper alternate' },
+      { name: 'pied piper pp' },
+      { name: 'pinterest' },
+      { name: 'pinterest p' },
+      { name: 'pinterest square' },
+      { name: 'playstation' },
+      { name: 'product hunt' },
+      { name: 'pushed' },
+      { name: 'python' },
+      { name: 'qq' },
+      { name: 'quinscape' },
+      { name: 'quora' },
+      { name: 'ravelry' },
+      { name: 'react' },
+      { name: 'rebel' },
+      { name: 'redriver' },
+      { name: 'reddit' },
+      { name: 'reddit alien' },
+      { name: 'reddit square' },
+      { name: 'rendact' },
+      { name: 'renren' },
+      { name: 'replyd' },
+      { name: 'resolving' },
+      { name: 'rocketchat' },
+      { name: 'rockrms' },
+      { name: 'safari' },
+      { name: 'sass' },
+      { name: 'schlix' },
+      { name: 'scribd' },
+      { name: 'searchengin' },
+      { name: 'sellcast' },
+      { name: 'sellsy' },
+      { name: 'servicestack' },
+      { name: 'shirtsinbulk' },
+      { name: 'simplybuilt' },
+      { name: 'sistrix' },
+      { name: 'skyatlas' },
+      { name: 'skype' },
+      { name: 'slack' },
+      { name: 'slack hash' },
+      { name: 'slideshare' },
+      { name: 'snapchat' },
+      { name: 'snapchat ghost' },
+      { name: 'snapchat square' },
+      { name: 'soundcloud' },
+      { name: 'speakap' },
+      { name: 'spotify' },
+      { name: 'stack exchange' },
+      { name: 'stack overflow' },
+      { name: 'staylinked' },
+      { name: 'steam' },
+      { name: 'steam square' },
+      { name: 'steam symbol' },
+      { name: 'sticker mule' },
+      { name: 'strava' },
+      { name: 'stripe' },
+      { name: 'stripe s' },
+      { name: 'studiovinari' },
+      { name: 'stumbleupon' },
+      { name: 'stumbleupon circle' },
+      { name: 'superpowers' },
+      { name: 'supple' },
+      { name: 'telegram' },
+      { name: 'telegram plane' },
+      { name: 'tencent weibo' },
+      { name: 'themeisle' },
+      { name: 'trello' },
+      { name: 'tripadvisor' },
+      { name: 'tumblr' },
+      { name: 'tumblr square' },
+      { name: 'twitch' },
+      { name: 'twitter' },
+      { name: 'twitter square' },
+      'typo3',
+      { name: 'uber' },
+      { name: 'uikit' },
+      { name: 'uniregistry' },
+      { name: 'untappd' },
+      { name: 'usb' },
+      { name: 'ussunnah' },
+      { name: 'vaadin' },
+      { name: 'viacoin' },
+      { name: 'viadeo' },
+      { name: 'viadeo square' },
+      { name: 'viber' },
+      { name: 'vimeo' },
+      { name: 'vimeo square' },
+      { name: 'vimeo v' },
+      { name: 'vine' },
+      { name: 'vk' },
+      { name: 'vnv' },
+      { name: 'vuejs' },
+      { name: 'wechat' },
+      { name: 'weibo' },
+      { name: 'weixin' },
+      { name: 'whatsapp' },
+      { name: 'whatsapp square' },
+      { name: 'whmcs' },
+      { name: 'wikipedia w' },
+      { name: 'windows' },
+      { name: 'wordpress' },
+      { name: 'wordpress simple' },
+      { name: 'wpbeginner' },
+      { name: 'wpexplorer' },
+      { name: 'wpforms' },
+      { name: 'xbox' },
+      { name: 'xing' },
+      { name: 'xing square' },
+      { name: 'y combinator' },
+      { name: 'yahoo' },
+      { name: 'yandex' },
+      { name: 'yandex international' },
+      { name: 'yelp' },
+      { name: 'yoast' },
+      { name: 'youtube' },
+      { name: 'youtube square' },
+    ],
+  },
+  iconAliases: {
+    title: 'Icon Aliases',
+    list: [
+      { name: 'chess rock' },
+      { name: 'ordered list' },
+      { name: 'unordered list' },
+      { name: 'user doctor' },
+      { name: 'shield' },
+      { name: 'puzzle' },
+      { name: 'add circle' },
+      { name: 'add square' },
+      { name: 'add to calendar' },
+      { name: 'add to cart' },
+      { name: 'add user' },
+      { name: 'add' },
+      { name: 'alarm mute' },
+      { name: 'alarm' },
+      { name: 'ald' },
+      { name: 'als' },
+      { name: 'announcement' },
+      { name: 'area chart' },
+      { name: 'area graph' },
+      { name: 'arrow down cart' },
+      { name: 'asexual' },
+      { name: 'asl interpreting' },
+      { name: 'asl' },
+      { name: 'assistive listening devices' },
+      { name: 'attach' },
+      { name: 'attention' },
+      { name: 'balance' },
+      { name: 'bar' },
+      { name: 'bathtub' },
+      { name: 'battery four' },
+      { name: 'battery high' },
+      { name: 'battery low' },
+      { name: 'battery one' },
+      { name: 'battery three' },
+      { name: 'battery two' },
+      { name: 'battery zero' },
+      { name: 'birthday' },
+      { name: 'block layout' },
+      { name: 'bluetooth alternative' },
+      { name: 'broken chain' },
+      { name: 'browser' },
+      { name: 'call square' },
+      { name: 'call' },
+      { name: 'cancel' },
+      { name: 'cart' },
+      { name: 'cc' },
+      { name: 'chain' },
+      { name: 'chat' },
+      { name: 'checked calendar' },
+      { name: 'checkmark' },
+      { name: 'circle notched' },
+      { name: 'close' },
+      { name: 'cny' },
+      { name: 'cocktail' },
+      { name: 'commenting' },
+      { name: 'computer' },
+      { name: 'configure' },
+      { name: 'content' },
+      { name: 'deafness' },
+      { name: 'delete calendar' },
+      { name: 'delete' },
+      { name: 'detective' },
+      { name: 'discussions' },
+      { name: 'doctor' },
+      { name: 'dollar' },
+      { name: 'dont' },
+      { name: 'drivers license' },
+      { name: 'dropdown' },
+      { name: 'emergency' },
+      { name: 'envira gallery' },
+      { name: 'erase' },
+      { name: 'eur' },
+      { name: 'euro' },
+      { name: 'eyedropper' },
+      { name: 'factory' },
+      { name: 'favorite' },
+      { name: 'feed' },
+      { name: 'female homosexual' },
+      { name: 'file text' },
+      { name: 'file text outline' },
+      { name: 'find' },
+      { name: 'first aid' },
+      { name: 'fork' },
+      { name: 'game' },
+      { name: 'gay' },
+      { name: 'gbp' },
+      { name: 'google plus circle' },
+      { name: 'google plus official' },
+      { name: 'grab' },
+      { name: 'graduation' },
+      { name: 'grid layout' },
+      { name: 'group' },
+      { name: 'h' },
+      { name: 'hand victory' },
+      { name: 'handicap' },
+      { name: 'hard of hearing' },
+      { name: 'header' },
+      { name: 'help circle' },
+      { name: 'help' },
+      { name: 'heterosexual' },
+      { name: 'hide' },
+      { name: 'hotel' },
+      { name: 'hourglass four' },
+      { name: 'hourglass full' },
+      { name: 'hourglass one' },
+      { name: 'hourglass three' },
+      { name: 'hourglass two' },
+      { name: 'idea' },
+      { name: 'ils' },
+      { name: 'in cart' },
+      { name: 'inr' },
+      { name: 'intergender' },
+      { name: 'intersex' },
+      { name: 'jpy' },
+      { name: 'krw' },
+      { name: 'lab' },
+      { name: 'law' },
+      { name: 'legal' },
+      { name: 'lesbian' },
+      { name: 'lightning' },
+      { name: 'like' },
+      { name: 'line graph' },
+      { name: 'linkedin square' },
+      { name: 'linkify' },
+      { name: 'lira' },
+      { name: 'list layout' },
+      { name: 'magnify' },
+      { name: 'mail forward' },
+      { name: 'mail outline' },
+      { name: 'mail square' },
+      { name: 'mail' },
+      { name: 'male homosexual' },
+      { name: 'man' },
+      { name: 'marker' },
+      { name: 'mars alternate' },
+      { name: 'mars horizontal' },
+      { name: 'mars vertical' },
+      { name: 'microsoft edge' },
+      { name: 'military' },
+      { name: 'ms edge' },
+      { name: 'mute' },
+      { name: 'new pied piper' },
+      { name: 'non binary transgender' },
+      { name: 'numbered list' },
+      { name: 'options' },
+      { name: 'other gender horizontal' },
+      { name: 'other gender vertical' },
+      { name: 'other gender' },
+      { name: 'payment' },
+      { name: 'paypal card' },
+      { name: 'pencil square' },
+      { name: 'photo' },
+      { name: 'picture' },
+      { name: 'pie chart' },
+      { name: 'pie graph' },
+      { name: 'pied piper hat' },
+      { name: 'pin' },
+      { name: 'plus cart' },
+      { name: 'point' },
+      { name: 'pointing down' },
+      { name: 'pointing left' },
+      { name: 'pointing right' },
+      { name: 'pointing up' },
+      { name: 'pound' },
+      { name: 'power cord' },
+      { name: 'power' },
+      { name: 'privacy' },
+      { name: 'r circle' },
+      { name: 'rain' },
+      { name: 'record' },
+      { name: 'refresh' },
+      { name: 'remove circle' },
+      { name: 'remove from calendar' },
+      { name: 'remove user' },
+      { name: 'remove' },
+      { name: 'repeat' },
+      { name: 'rmb' },
+      { name: 'rouble' },
+      { name: 'rub' },
+      { name: 'ruble' },
+      { name: 'rupee' },
+      's15',
+      { name: 'selected radio' },
+      { name: 'send' },
+      { name: 'setting' },
+      { name: 'settings' },
+      { name: 'shekel' },
+      { name: 'sheqel' },
+      { name: 'shipping' },
+      { name: 'shop' },
+      { name: 'shuffle' },
+      { name: 'shutdown' },
+      { name: 'sidebar' },
+      { name: 'signing' },
+      { name: 'signup' },
+      { name: 'sliders' },
+      { name: 'soccer' },
+      { name: 'sort alphabet ascending' },
+      { name: 'sort alphabet descending' },
+      { name: 'sort ascending' },
+      { name: 'sort content ascending' },
+      { name: 'sort content descending' },
+      { name: 'sort descending' },
+      { name: 'sort numeric ascending' },
+      { name: 'sort numeric descending' },
+      { name: 'sound' },
+      { name: 'spy' },
+      { name: 'stripe card' },
+      { name: 'student' },
+      { name: 'talk' },
+      { name: 'target' },
+      { name: 'teletype' },
+      { name: 'television' },
+      { name: 'text cursor' },
+      { name: 'text telephone' },
+      { name: 'theme' },
+      { name: 'thermometer' },
+      { name: 'thumb tack' },
+      { name: 'time' },
+      { name: 'tm' },
+      { name: 'toggle down' },
+      { name: 'toggle left' },
+      { name: 'toggle right' },
+      { name: 'toggle up' },
+      { name: 'translate' },
+      { name: 'travel' },
+      { name: 'treatment' },
+      { name: 'triangle down' },
+      { name: 'triangle left' },
+      { name: 'triangle right' },
+      { name: 'triangle up' },
+      { name: 'try' },
+      { name: 'unhide' },
+      { name: 'unlinkify' },
+      { name: 'unmute' },
+      { name: 'usd' },
+      { name: 'user cancel' },
+      { name: 'user close' },
+      { name: 'user delete' },
+      { name: 'user x' },
+      { name: 'vcard' },
+      { name: 'video camera' },
+      { name: 'video play' },
+      { name: 'volume control phone' },
+      { name: 'wait' },
+      { name: 'warning circle' },
+      { name: 'warning sign' },
+      { name: 'warning' },
+      'wi-fi',
+      { name: 'winner' },
+      { name: 'wizard' },
+      { name: 'woman' },
+      { name: 'won' },
+      { name: 'wordpress beginner' },
+      { name: 'wordpress forms' },
+      { name: 'world' },
+      { name: 'write square' },
+      { name: 'x' },
+      { name: 'yen' },
+      { name: 'zip' },
+      { name: 'zoom in' },
+      { name: 'zoom out' },
+      { name: 'zoom' },
+      { name: 'bitbucket square' },
+      { name: 'checkmark box' },
+      { name: 'circle thin' },
+      { name: 'cloud download' },
+      { name: 'cloud upload' },
+      { name: 'compose' },
+      { name: 'conversation' },
+      { name: 'credit card alternative' },
+      { name: 'currency' },
+      { name: 'dashboard' },
+      { name: 'diamond' },
+      { name: 'disk' },
+      { name: 'exchange' },
+      { name: 'external share' },
+      { name: 'external square' },
+      { name: 'external' },
+      { name: 'facebook official' },
+      { name: 'food' },
+      { name: 'hourglass zero' },
+      { name: 'level down' },
+      { name: 'level up' },
+      { name: 'log out' },
+      { name: 'meanpath' },
+      { name: 'money' },
+      { name: 'move' },
+      { name: 'pencil' },
+      { name: 'protect' },
+      { name: 'radio' },
+      { name: 'remove bookmark' },
+      { name: 'resize horizontal' },
+      { name: 'resize vertical' },
+      { name: 'sign in' },
+      { name: 'sign out' },
+      { name: 'spoon' },
+      { name: 'star half empty' },
+      { name: 'star half full' },
+      { name: 'ticket' },
+      { name: 'times rectangle' },
+      { name: 'write' },
+      { name: 'youtube play' },
+    ],
+  },
+};
diff --git a/src/default/index.js b/src/default/index.js
new file mode 100644
index 0000000..7bae096
--- /dev/null
+++ b/src/default/index.js
@@ -0,0 +1,6 @@
+import ResultRenderer from './ResultRenderer';
+import CategoryRenderer from './CategoryRenderer';
+import CategoryLayoutRenderer from './CategoryLayoutRenderer';
+import { iconList } from './iconList';
+
+export { ResultRenderer, CategoryRenderer, CategoryLayoutRenderer, iconList };
diff --git a/src/index.js b/src/index.js
index cb042f0..f53cff2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,30 @@
+import IconSelectorWidgetView from './view/IconSelectorWidget';
+import IconSelectorWidget from './widget/IconSelectorWidget';
+import {
+  ResultRenderer,
+  CategoryRenderer,
+  CategoryLayoutRenderer,
+  iconList,
+} from './default';
+
 const applyConfig = (config) => {
+  config.widgets.widget['icon_selector'] = IconSelectorWidget;
+  config.widgets.views.widget['icon_selector'] = IconSelectorWidgetView;
+
+  config.settings = {
+    ...config.settings,
+    widget: {
+      icon_selector: {
+        iconList: iconList,
+        defaultRenderer: {
+          ResultRenderer,
+          CategoryRenderer,
+          CategoryLayoutRenderer,
+        },
+      },
+    },
+  };
+
   return config;
 };
 
diff --git a/src/styles/style.less b/src/styles/style.less
new file mode 100644
index 0000000..80f9204
--- /dev/null
+++ b/src/styles/style.less
@@ -0,0 +1,20 @@
+.icon-selector {
+  .ui.category.search {
+    .results {
+      max-width: 18em;
+    }
+
+    > .results {
+      .category {
+        h3.name {
+          margin: 0.5rem;
+        }
+
+        .results {
+          display: flex;
+          flex-wrap: wrap;
+        }
+      }
+    }
+  }
+}
diff --git a/src/view/IconSelectorWidget.jsx b/src/view/IconSelectorWidget.jsx
new file mode 100644
index 0000000..75bb3c7
--- /dev/null
+++ b/src/view/IconSelectorWidget.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import cx from 'classnames';
+import { Icon } from 'semantic-ui-react';
+
+const IconSelectorWidget = (props) => {
+  const { value, className } = props;
+  return value ? (
+    <span className={cx(className, 'icon-selector', 'widget')}>
+      <Icon name={value} />
+    </span>
+  ) : (
+    <></>
+  );
+};
+
+export default IconSelectorWidget;
diff --git a/src/widget/IconSelectorWidget.jsx b/src/widget/IconSelectorWidget.jsx
new file mode 100644
index 0000000..b4ffa58
--- /dev/null
+++ b/src/widget/IconSelectorWidget.jsx
@@ -0,0 +1,128 @@
+import _ from 'lodash';
+import React, { useState } from 'react';
+import { FormFieldWrapper } from '@plone/volto/components';
+import { Search, Icon } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+import '../styles/style.less';
+
+const initialState = {
+  loading: false,
+  results: {},
+  value: '',
+};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'CLEAN_QUERY':
+      return initialState;
+    case 'START_SEARCH':
+      return { ...state, loading: true, value: action.query };
+    case 'FINISH_SEARCH':
+      return { ...state, loading: false, results: action.results };
+    case 'UPDATE_SELECTION':
+      return { ...state, value: action.selection };
+
+    default:
+      throw new Error();
+  }
+}
+
+const IconSelectorWidget = (props) => {
+  const {
+    id,
+    value: blockValue,
+    onChange,
+    onBlur,
+    placeholder = 'Search...',
+  } = props;
+
+  const inputId = `field-${id}`;
+
+  const { iconList, defaultRenderer } = config.settings.widget.icon_selector;
+
+  const [focus, setFocus] = useState(false);
+
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+  const { loading, results, value } = state;
+
+  const timeoutRef = React.useRef();
+  const handleSearchChange = React.useCallback((e, data) => {
+    clearTimeout(timeoutRef.current);
+    dispatch({ type: 'START_SEARCH', query: data.value });
+
+    timeoutRef.current = setTimeout(() => {
+      if (data.value.length === 0) {
+        dispatch({ type: 'CLEAN_QUERY' });
+        return;
+      }
+
+      const re = new RegExp(_.escapeRegExp(data.value), 'i');
+      const isMatch = (result) => re.test(result.name);
+
+      const filteredResults = _.reduce(
+        iconList,
+        (memo, data, name) => {
+          const results = _.filter(data.list, isMatch);
+          if (results.length) memo[name] = { name: data.title, results }; // eslint-disable-line no-param-reassign
+
+          return memo;
+        },
+        {},
+      );
+
+      dispatch({
+        type: 'FINISH_SEARCH',
+        results: filteredResults,
+      });
+    }, 300);
+  }, []);
+
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return (
+    <>
+      <FormFieldWrapper {...props} className="icon-selector">
+        <div className="wrapper">
+          <Icon name={value ? value : blockValue} />
+          <Search
+            id={inputId}
+            name={id}
+            category
+            loading={loading}
+            placeholder={placeholder}
+            onResultSelect={(e, data) => {
+              dispatch({
+                type: 'UPDATE_SELECTION',
+                selection: data.result.name,
+              });
+              onChange(
+                id,
+                data.result.name === '' ? undefined : data.result.name,
+              );
+            }}
+            onSearchChange={handleSearchChange}
+            onBlur={({ target }) => {
+              setFocus(false);
+              onBlur &&
+                onBlur(id, target.value === '' ? undefined : target.value);
+            }}
+            onFocus={(event, data) => setFocus(true)}
+            results={results}
+            value={value ? value : focus ? '' : blockValue}
+            defaultValue={blockValue ? blockValue : ''}
+            categoryLayoutRenderer={defaultRenderer.CategoryLayoutRenderer}
+            categoryRenderer={defaultRenderer.CategoryRenderer}
+            resultRenderer={defaultRenderer.ResultRenderer}
+            aligned="right"
+          />
+        </div>
+      </FormFieldWrapper>
+    </>
+  );
+};
+
+export default IconSelectorWidget;