diff --git a/src/components/font-awesome-icon/index.js b/src/components/font-awesome-icon/index.js
index cf454e270..499b4d3da 100644
--- a/src/components/font-awesome-icon/index.js
+++ b/src/components/font-awesome-icon/index.js
@@ -80,6 +80,10 @@ const addSVGAttributes = ( svgHTML, attributesToAdd = {}, attributesToRemove = [
 }
 
 const FontAwesomeIcon = memo( props => {
+	const { 
+		svgAttrsToAdd = { width: '32', height: '32' },
+		svgAttrsToRemove = [ 'id', 'data-name' ],
+	} = props
 	const [ forceUpdateCount, setForceUpdateCount ] = useState( 0 )
 	const forceUpdate = () => {
 		setForceUpdateCount( forceUpdateCount + 1 )
@@ -91,7 +95,7 @@ const FontAwesomeIcon = memo( props => {
 	if ( typeof props.value === 'string' && props.value.match( /^<svg/ ) ) {
 		let svg = addSVGAriaLabel( props.value, props.ariaLabel )
 		// Add fallback SVG width and height values.
-		svg = addSVGAttributes( svg, { width: '32', height: '32' } )
+		svg = addSVGAttributes( svg, svgAttrsToAdd, svgAttrsToRemove )
 		return <RawHTML { ...propsToPass }>{ props.prependRenderString + svg }</RawHTML>
 	}
 
@@ -109,7 +113,7 @@ const FontAwesomeIcon = memo( props => {
 
 		let svg = addSVGAriaLabel( iconHTML, props.ariaLabel )
 		// Add fallback SVG width and height values.
-		svg = addSVGAttributes( svg, { width: '32', height: '32' } )
+		svg = addSVGAttributes( svg, svgAttrsToAdd, svgAttrsToRemove )
 		return <RawHTML { ...propsToPass }>{ props.prependRenderString + svg }</RawHTML>
 	}
 
@@ -123,7 +127,7 @@ const FontAwesomeIcon = memo( props => {
 
 	let svg = addSVGAriaLabel( iconHTML, props.ariaLabel )
 	// Add fallback SVG width and height values.
-	svg = addSVGAttributes( svg, { width: '32', height: '32' } )
+	svg = addSVGAttributes( svg, svgAttrsToAdd, svgAttrsToRemove )
 	return <RawHTML { ...propsToPass }>{ props.prependRenderString + svg }</RawHTML>
 } )
 
diff --git a/src/components/icon-search-popover/index.js b/src/components/icon-search-popover/index.js
index 272e81302..95163c872 100644
--- a/src/components/icon-search-popover/index.js
+++ b/src/components/icon-search-popover/index.js
@@ -11,7 +11,9 @@ import {
 	PanelBody, TextControl, Spinner,
 } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
-import { useState, useEffect } from '@wordpress/element'
+import {
+	useState, useEffect, Fragment,
+} from '@wordpress/element'
 
 /**
  * External dependencies
@@ -25,6 +27,7 @@ import {
 import { faGetIcon, faFetchIcon } from '~stackable/util'
 import { FileDrop } from 'react-file-drop'
 import classnames from 'classnames'
+import { applyFilters, doAction } from '@wordpress/hooks'
 
 let searchTimeout = null
 let tempMediaUpload = null
@@ -83,7 +86,7 @@ export const cleanSvgString = svgString => {
 
 const IconSearchPopover = props => {
 	const [ value, setValue ] = useState( '' )
-	const [ results, setResults ] = useState( [] )
+	const [ results, setResults ] = useState( { faIcons: [], iconLibrary: [] } )
 	const [ isBusy, setIsBusy ] = useState( false )
 	const [ isDropping, setIsDropping ] = useState( false )
 
@@ -151,6 +154,9 @@ const IconSearchPopover = props => {
 			fr.onload = function( e ) {
 				setIsDropping( false )
 				const svgString = cleanSvgString( addCustomIconClass( e.target.result ) )
+
+				doAction( 'stackable.icon-search-popover.svg-upload', svgString )
+
 				props.onChange( svgString )
 				props.onClose()
 			}
@@ -168,6 +174,8 @@ const IconSearchPopover = props => {
 		'ugb-icon--has-reset': props.allowReset,
 	} )
 
+	const IconLibraryIcons = applyFilters( 'stackable.global-settings.inspector.icon-library.icons', Fragment )
+
 	const content = (
 		<div className="stk-icon-search-popover-container">
 			<FileDrop
@@ -191,6 +199,8 @@ const IconSearchPopover = props => {
 					fr.onload = function( e ) {
 						setIsDropping( false )
 						const svgString = cleanSvgString( addCustomIconClass( e.target.result ) )
+
+						doAction( 'stackable.icon-search-popover.svg-upload', svgString )
 						props.onChange( svgString )
 						props.onClose()
 					}
@@ -244,13 +254,26 @@ const IconSearchPopover = props => {
 				</div>
 				<div className="ugb-icon-popover__iconlist">
 					{ isBusy && <Spinner /> }
-					{ ! isBusy && results.map( ( { prefix, iconName }, i ) => {
+					{ ! isBusy && <IconLibraryIcons
+						icons={ results.iconLibrary }
+						onChange={ props.onChange }
+						onClose={ props.onClose }
+					/> }
+					{ ! isBusy && results.faIcons.map( ( { prefix, iconName }, i ) => {
 						const iconValue = `${ prefix }-${ iconName }`
 						return <button
 							key={ i }
 							className={ `components-button ugb-prefix--${ prefix } ugb-icon--${ iconName }` }
 							onClick={ async () => {
-								if ( props.returnSVGValue ) {
+								if ( props.returnSVGValue && props.returnIconName ) {
+									let svgIcon = faGetIcon( prefix, iconName )
+
+									if ( ! svgIcon ) {
+										await faFetchIcon( prefix, iconName )
+										svgIcon = faGetIcon( prefix, iconName )
+									}
+									props.onChange( cleanSvgString( svgIcon ), prefix, iconName )
+								} else if ( props.returnSVGValue ) {
 									let svgIcon = faGetIcon( prefix, iconName )
 
 									if ( ! svgIcon ) {
@@ -267,7 +290,7 @@ const IconSearchPopover = props => {
 							<FontAwesomeIcon prefix={ prefix } iconName={ iconName } />
 						</button>
 					} ) }
-					{ ! isBusy && ! results.length &&
+					{ ! isBusy && ! results.faIcons.length && ! results.iconLibrary.length &&
 						<p className="components-base-control__help">{ __( 'No matches found', i18n ) }</p>
 					}
 				</div>
diff --git a/src/components/icon-search-popover/search.js b/src/components/icon-search-popover/search.js
index 11aabc4d6..d3b7ea84d 100644
--- a/src/components/icon-search-popover/search.js
+++ b/src/components/icon-search-popover/search.js
@@ -1,3 +1,4 @@
+import { applyFilters } from '@wordpress/hooks'
 import {
 	fontAwesomeSearchProIcons, iconsFaKit, iconsFaProKitVersion, iconsFaFreeKitVersion,
 } from 'stackable'
@@ -23,13 +24,17 @@ export const searchFontAwesomeIconName = async ( name = 'icon', isPro = fontAwes
 	  } )
 		.then( r => r.json() )
 
-	return data.data.search.reduce( ( iconResults, iconData ) => {
+	const faIcons = data.data.search.reduce( ( iconResults, iconData ) => {
 		convertFontAwesomeToIcon( iconData, isPro ).forEach( icon => {
 			iconResults.push( icon )
 		} )
 
 		return iconResults
 	}, [] )
+
+	const iconLibrary = applyFilters( 'stackable.global-settings.inspector.icon-library.search-icons', null, name )
+
+	return { faIcons, iconLibrary }
 }
 
 /**
diff --git a/src/components/index.js b/src/components/index.js
index 08324109f..7881b4e39 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -115,3 +115,4 @@ export { default as ColumnsWidthMultiControl } from './columns-width-multi-contr
 export { default as Popover } from './popover'
 export { default as HelpTooltip } from './help-tooltip'
 export { default as RichText } from './rich-text'
+export { default as SortablePicker } from './sortable-picker'
diff --git a/src/components/pro-control/index.js b/src/components/pro-control/index.js
index 79f29f52b..7f7512880 100644
--- a/src/components/pro-control/index.js
+++ b/src/components/pro-control/index.js
@@ -109,6 +109,14 @@ const LABELS = {
 			<li>{ __( 'Hide the current post - great for synced patterns', i18n ) }</li>
 		</ul>,
 	},
+	'icon-library': {
+		title: __( 'Unlock Your Icon Library', i18n ),
+		description: <ul>
+			<li>{ __( 'Add your custom SVG icons', i18n ) }</li>
+			<li>{ __( 'Easily access your custom icons in the icon picker', i18n ) }</li>
+			<li>{ __( 'Organize your custom icons in your library', i18n ) }</li>
+		</ul>,
+	},
 }
 
 const ProControl = props => {
diff --git a/src/components/sortable-picker/index.js b/src/components/sortable-picker/index.js
new file mode 100644
index 000000000..ce1406db5
--- /dev/null
+++ b/src/components/sortable-picker/index.js
@@ -0,0 +1,236 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames'
+import { Button } from '~stackable/components'
+import {
+	sortableContainer, sortableElement, sortableHandle,
+} from 'react-sortable-hoc'
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BaseControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalHStack as HStack,
+	Dashicon,
+	Dropdown,
+} from '@wordpress/components'
+import { useState, useEffect } from '@wordpress/element'
+import { __ } from '@wordpress/i18n'
+
+const addItemPopoverProps = {
+	placement: 'left-start',
+	offset: 236,
+	shift: true,
+}
+
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+}
+
+// We need to define these because 13 (return key) is not included in the
+// default keyCodes to initiate a drag.
+const DRAG_KEYCODES = {
+	lift: [ 32, 13 ],
+	drop: [ 32, 13 ],
+	cancel: [ 27 ],
+	up: [ 38, 37 ],
+	down: [ 40, 39 ],
+}
+
+const SortablePicker = props => {
+	const {
+		items,
+		dropdownOnAdd = false,
+		onChangeItem,
+		onDeleteItem,
+		handleAddItem,
+		onSortEnd,
+		AddItemPopover = null,
+		ref,
+	} = props
+	const [ isSorting, setIsSorting ] = useState( false )
+
+	const classNames = classnames(
+		'ugb-global-settings-color-picker',
+		'components-circular-option-picker',
+		'editor-color-palette-control__color-palette',
+		props.className
+	)
+
+	return (
+		<BaseControl className={ classNames } label={ props.label }>
+			<Dropdown
+				popoverProps={ addItemPopoverProps }
+				renderToggle={ ( { onToggle, isOpen } ) => (
+					<Button
+						className="ugb-global-settings-color-picker__add-button"
+						onClick={ dropdownOnAdd ? onToggle : handleAddItem }
+						icon="plus-alt2"
+						aria-expanded={ isOpen }
+					/>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<AddItemPopover onClose={ onClose } onChange={ handleAddItem } />
+				) }
+			/>
+			<div
+				ref={ ref }
+				className={ classnames(
+					'ugb-global-settings-color-picker__color-indicators',
+					{ 'is-sorting': isSorting }
+				) }
+			>
+				<SortableContainer
+					items={ items }
+					onSortStart={ () => setIsSorting( true ) }
+					onSortEnd={ ( { oldIndex, newIndex } ) => onSortEnd( {
+						oldIndex, newIndex, setIsSorting,
+					} ) }
+					axis="y"
+					useDragHandle
+					keyCodes={ DRAG_KEYCODES }
+				>
+					{ items.map( ( item, i ) => (
+						<SortableItem
+							key={ i }
+							index={ i }
+							item={ item }
+							onDelete={ () => onDeleteItem( item ) }
+							onChange={ item => onChangeItem( item ) }
+							ItemPreview={ props.ItemPreview }
+							ItemPicker={ props.ItemPicker }
+							updateOnBlur={ props.updateOnBlur }
+						/> ) ) }
+				</SortableContainer>
+			</div>
+		</BaseControl>
+	)
+}
+
+SortablePicker.defaultProps = {
+	className: '',
+	label: '',
+	onReset: () => {},
+}
+
+export default SortablePicker
+
+const SortableItem = sortableElement( props => <LabeledItemIndicator { ...props } /> )
+
+const SortableContainer = sortableContainer( ( { children } ) => {
+	return <div>{ children }</div>
+} )
+
+const DragHandle = sortableHandle( () => <Dashicon
+	icon="menu"
+	size="16"
+	tabIndex="0"
+/> )
+
+const LabeledItemIndicator = props => {
+	const {
+		item,
+		onDelete,
+		onChange,
+		ItemPreview = null,
+		ItemPicker = null,
+		updateOnBlur = false, // If true, onChange will be called only when the input is blurred.
+	} = props
+
+	const [ isFocused, setIsFocused ] = useState( false )
+	const [ debouncedText, setDebouncedText ] = useState( item.name )
+
+	// Updates the debounced text when the items get resorted.
+	useEffect( () => {
+		if ( item.name !== debouncedText ) {
+			setDebouncedText( item.name )
+		}
+	}, [ item.name ] )
+
+	return (
+		<HStack justify="space-between" className="stk-global-settings-color-picker__color-indicator-wrapper">
+			<Dropdown
+				popoverProps={ popoverProps }
+				// This is so that when we click on the label to edit it, the input doesn't lose focus.
+				focusOnMount={ ! isFocused ? 'firstElement' : false }
+				renderToggle={ ( { onToggle, isOpen } ) => {
+					return (
+						<Button
+							className="block-editor-panel-color-gradient-settings__dropdown"
+							onClick={ () => {
+								if ( ! isFocused ) {
+									onToggle()
+								}
+							} }
+							isPressed={ isOpen }
+						>
+							<HStack justify="flex-start">
+								<ItemPreview item={ item } />
+								<input
+									className="components-input-control__input"
+									value={ isFocused ? debouncedText : item.name }
+									onChange={ ev => {
+										setDebouncedText( ev.target.value )
+
+										// If we're not updating on blur, update the value immediately.
+										if ( ! updateOnBlur ) {
+											onChange( {
+												...item,
+												name: ev.target.value,
+											} )
+										}
+									} }
+									onFocus={ () => setIsFocused( true ) }
+									onBlur={ ev => {
+										if ( updateOnBlur ) {
+											onChange( {
+												...item,
+												name: debouncedText,
+											} )
+										}
+
+										// Update isFocused after a delay to ensure onChange has finished if updating on blur.
+										setTimeout( () => {
+											setIsFocused( false )
+										}, 100 )
+
+										if ( isOpen && ! ev.relatedTarget?.closest( '.components-popover' ) ) {
+											onToggle()
+										}
+									} }
+									onClick={ () => {
+										if ( ! isOpen ) {
+											onToggle()
+										}
+									} }
+									onKeyDown={ ev => {
+										// On enter, blur the input.
+										if ( ev.keyCode === 13 ) {
+											ev.target.blur()
+										}
+									} }
+								/>
+								<DragHandle />
+							</HStack>
+						</Button>
+					)
+				} }
+				renderContent={ () => (
+					<ItemPicker item={ item } onChange={ onChange } />
+				) }
+			/>
+			<Button
+				className="stk-global-settings-color-picker__delete-button"
+				icon="trash"
+				isSmall
+				isTertiary
+				onClick={ onDelete }
+			/>
+		</HStack>
+	)
+}
diff --git a/src/global-settings.php b/src/global-settings.php
index a88e0d4a7..9949ab46b 100644
--- a/src/global-settings.php
+++ b/src/global-settings.php
@@ -281,6 +281,35 @@ public function register_global_settings() {
 					'default' => '',
 				)
 			);
+
+			register_setting(
+				'stackable_global_settings',
+				'stackable_icon_library',
+				array(
+					'type' => 'array',
+					'description' => __( 'Stackable Icon Library', STACKABLE_I18N ),
+					'sanitize_callback' => array( $this, 'sanitize_array_setting' ),
+					'show_in_rest' => array(
+						'schema' => array(
+							'items' => array(
+								'type' => 'object',
+								'properties' => array(
+									'name' => array(
+										'type' => 'string',
+									),
+									'key' => array(
+										'type' => 'string',
+									),
+									'icon' => array(
+										'type' => 'string',
+									),
+								)
+							)
+						)
+					),
+					'default' => '',
+				)
+			);
 		}
 
 		/**
diff --git a/src/plugins/global-settings/colors/color-picker.js b/src/plugins/global-settings/colors/color-picker.js
index ddd9c9615..0b9d97ad6 100644
--- a/src/plugins/global-settings/colors/color-picker.js
+++ b/src/plugins/global-settings/colors/color-picker.js
@@ -10,55 +10,22 @@ import {
 /**
  * External dependencies
  */
-import classnames from 'classnames'
 import { cloneDeep } from 'lodash'
 import { i18n } from 'stackable'
-import { Button } from '~stackable/components'
-import {
-	sortableContainer, sortableElement, sortableHandle,
-} from 'react-sortable-hoc'
+import { SortablePicker } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import {
-	ColorPicker,
-	BaseControl,
-	ColorIndicator,
-	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
-	__experimentalHStack as HStack,
-	Dashicon,
-	Dropdown,
-} from '@wordpress/components'
-import { useState, useRef } from '@wordpress/element'
+import { useRef } from '@wordpress/element'
 import {
 	select, dispatch, useSelect,
 } from '@wordpress/data'
 import { models } from '@wordpress/api'
 import { __, sprintf } from '@wordpress/i18n'
-
-const popoverProps = {
-	placement: 'left-start',
-	offset: 36,
-	shift: true,
-}
-
-// We need to define these because 13 (return key) is not included in the
-// default keyCodes to initiate a drag.
-const DRAG_KEYCODES = {
-	lift: [ 32, 13 ],
-	drop: [ 32, 13 ],
-	cancel: [ 27 ],
-	up: [ 38, 37 ],
-	down: [ 40, 39 ],
-}
+import { ColorIndicator, ColorPicker } from '@wordpress/components'
 
 let saveTimeout = null
 
 const ColorPickers = props => {
-	const [ isSorting, setIsSorting ] = useState( false )
 	const ref = useRef()
-
 	const {
 		colors,
 	} = useSelect( select => {
@@ -149,7 +116,9 @@ const ColorPickers = props => {
 		}, 1 )
 	}
 
-	const onSortEnd = ( { oldIndex, newIndex } ) => {
+	const onSortEnd = ( {
+		oldIndex, newIndex, setIsSorting,
+	} ) => {
 		const updatedColors = cloneDeep( colors )
 		// Move the color to the new index.
 		updatedColors.splice( newIndex, 0, updatedColors.splice( oldIndex, 1 )[ 0 ] )
@@ -158,46 +127,39 @@ const ColorPickers = props => {
 		setIsSorting( false )
 	  }
 
-	const classNames = classnames(
-		'ugb-global-settings-color-picker',
-		'components-circular-option-picker',
-		'editor-color-palette-control__color-palette',
-		props.className
-	)
+	  const ItemPreview = ( { item } ) => {
+		return <ColorIndicator
+			className="stk-color-indicator block-editor-panel-color-gradient-settings__color-indicator"
+			colorValue={ item.color }
+		/>
+	  }
 
-	return (
-		<BaseControl className={ classNames } label={ props.label }>
-			<Button
-				className="ugb-global-settings-color-picker__add-button"
-				onClick={ handleAddIcon }
-				icon="plus-alt2"
+	  const ItemPicker = ( { item, onChange } ) => {
+		return <div className="stk-color-palette-control__popover-content">
+			<ColorPicker
+				onChange={ value => onChange( {
+					...item,
+					color: value,
+				} ) }
+				color={ item.color }
+				enableAlpha={ true }
 			/>
-			<div
-				ref={ ref }
-				className={ classnames(
-					'ugb-global-settings-color-picker__color-indicators',
-					{ 'is-sorting': isSorting }
-				) }
-			>
-				<SortableContainer
-					items={ colors }
-					onSortStart={ () => setIsSorting( true ) }
-					onSortEnd={ onSortEnd }
-					axis="y"
-					useDragHandle
-					keyCodes={ DRAG_KEYCODES }
-				>
-					{ colors.map( ( color, i ) => (
-						<SortableItem
-							key={ i }
-							index={ i }
-							color={ color }
-							onDelete={ () => onColorDelete( color ) }
-							onChange={ color => onChangeColor( color ) }
-						/> ) ) }
-				</SortableContainer>
-			</div>
-		</BaseControl>
+		</div>
+	  }
+
+	return (
+		<SortablePicker
+			ref={ ref }
+			items={ colors }
+			itemType="color"
+			onChangeItem={ onChangeColor }
+			onDeleteItem={ onColorDelete }
+			handleAddItem={ handleAddIcon }
+			onSortEnd={ onSortEnd }
+			ItemPreview={ ItemPreview }
+			ItemPicker={ ItemPicker }
+			{ ...props }
+		/>
 	)
 }
 
@@ -208,103 +170,3 @@ ColorPickers.defaultProps = {
 }
 
 export default ColorPickers
-
-const SortableItem = sortableElement( props => <LabeledColorIndicator { ...props } /> )
-
-const SortableContainer = sortableContainer( ( { children } ) => {
-	return <div>{ children }</div>
-} )
-
-const DragHandle = sortableHandle( () => <Dashicon
-	icon="menu"
-	size="16"
-	tabIndex="0"
-/> )
-
-const LabeledColorIndicator = props => {
-	const {
-		color,
-		onDelete,
-		onChange,
-	} = props
-
-	const [ isFocused, setIsFocused ] = useState( false )
-
-	return (
-		<HStack justify="space-between" className="stk-global-settings-color-picker__color-indicator-wrapper">
-			<Dropdown
-				popoverProps={ popoverProps }
-				// This is so that when we click on the label to edit it, the input doesn't lose focus.
-				focusOnMount={ ! isFocused ? 'firstElement' : false }
-				renderToggle={ ( { onToggle, isOpen } ) => {
-					return (
-						<Button
-							className="block-editor-panel-color-gradient-settings__dropdown"
-							onClick={ () => {
-								if ( ! isFocused ) {
-									onToggle()
-								}
-							} }
-							isPressed={ isOpen }
-						>
-							<HStack justify="flex-start">
-								<ColorIndicator
-									className="stk-color-indicator block-editor-panel-color-gradient-settings__color-indicator"
-									colorValue={ color.color }
-								/>
-								<input
-									className="components-input-control__input"
-									value={ color.name }
-									onChange={ ev => {
-										onChange( {
-											...color,
-											name: ev.target.value,
-										} )
-									} }
-									onFocus={ () => setIsFocused( true ) }
-									onBlur={ ev => {
-										setIsFocused( false )
-										if ( isOpen && ! ev.relatedTarget?.closest( '.components-popover' ) ) {
-											onToggle()
-										}
-									} }
-									onClick={ () => {
-										if ( ! isOpen ) {
-											onToggle()
-										}
-									} }
-									onKeyDown={ ev => {
-										// On enter, blur the input.
-										if ( ev.keyCode === 13 ) {
-											ev.target.blur()
-										}
-									} }
-								/>
-								<DragHandle />
-							</HStack>
-						</Button>
-					)
-				} }
-				renderContent={ () => (
-					<div className="stk-color-palette-control__popover-content">
-						<ColorPicker
-							onChange={ value => onChange( {
-								...color,
-								color: value,
-							} ) }
-							color={ color.color }
-							enableAlpha={ true }
-						/>
-					</div>
-				) }
-			/>
-			<Button
-				className="stk-global-settings-color-picker__delete-button"
-				icon="trash"
-				isSmall
-				isTertiary
-				onClick={ onDelete }
-			/>
-		</HStack>
-	)
-}
diff --git a/src/plugins/global-settings/editor.scss b/src/plugins/global-settings/editor.scss
index b0e99f787..99730fdaf 100644
--- a/src/plugins/global-settings/editor.scss
+++ b/src/plugins/global-settings/editor.scss
@@ -1,5 +1,5 @@
 .ugb-global-settings__inspector.components-panel {
-	.components-panel__body-title {
+	.components-panel__body  .components-panel__body-title {
 		top: 48px;
 	}
 }
diff --git a/src/plugins/global-settings/icon-library.js b/src/plugins/global-settings/icon-library.js
new file mode 100644
index 000000000..509621646
--- /dev/null
+++ b/src/plugins/global-settings/icon-library.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { i18n, isPro } from 'stackable'
+import {
+	PanelAdvancedSettings,
+	ProControl,
+} from '~stackable/components'
+
+import { addFilter, applyFilters } from '@wordpress/hooks'
+import { Fragment } from '@wordpress/element'
+import { __ } from '@wordpress/i18n'
+
+addFilter( 'stackable.global-settings.inspector', 'stackable/icon-library', output => {
+	return (
+		<Fragment>
+			{ output }
+
+			<PanelAdvancedSettings
+				title={ __( 'Icon Library', i18n ) }
+				id="icon-library-settings"
+				isPremiumPanel={ ! isPro }
+			>
+				{ ! isPro && <ProControl type="icon-library" /> }
+				{ isPro &&
+						applyFilters( 'stackable.global-settings.inspector.icon-library.control', null )
+				}
+
+			</PanelAdvancedSettings>
+		</Fragment>
+	)
+} )
+
diff --git a/src/plugins/global-settings/index.js b/src/plugins/global-settings/index.js
index d0c7fabc0..2bf5fcc5c 100644
--- a/src/plugins/global-settings/index.js
+++ b/src/plugins/global-settings/index.js
@@ -3,6 +3,7 @@
  */
 import './editor-loader'
 import './block-defaults'
+import './icon-library'
 
 /**
  * External dependencies