Vanilla icon picker

GitHub package.json version

Icons includes:

  • FontAwesome 5 (Brands, Solid and Regular)
  • Material Design Icons
  • Iconoir

Getting started


Install via npm or yarn

// NPM
npm i vanilla-icon-picker

yarn add vanilla-icon-picker

// One of the following themes
import 'vanilla-icon-picker/dist/themes/default.min.css'; // 'default' theme
import 'vanilla-icon-picker/dist/themes/bootstrap-5.min.css'; // 'bootstrap-5' theme

import IconPicker from 'vanilla-icon-picker';

⚠️ Attention: If you use bootstrap theme dont forget to include bootstrap 5 css.


const iconPicker = new IconPicker('input', {
    // Options

Live demo →


    // Change icon picker's theme
    theme: 'default' | 'bootstrap-5',

    // Set icon(s) library(ies)
    // 'FontAwesome Brands 5' | 'FontAwesome Solid 5' | 'FontAwesome Regular 5' | 'Material Design Icons' | 'Iconoir'
    iconSource: [],

    // Close icon picker modal when icon is selected
    // If is `false` save button appear
    closeOnSelect: true,
    // Set a default value, preselect for example
    // icon's value and icon's name work
    defaultValue: null,
    // Translatable text
    i18n: {
    'input:placeholder': 'Search icon…',

    'text:title': 'Select icon',
    'text:empty': 'No results found…',

    'btn:save': 'Save'


Use the on(event, callback) and off(event, callback) functions to bind / unbind eventlistener.

Event Description Arguments
select Icon is selected, return icon value, name, svg and unicode if exist Object
save Fired when saved with button or if closeOnSelect option is true, return return icon value, name, svg and unicode if exist Object
show Modal is shown IconPickerInstance
hide Modal picker is hidden IconPickerInstance

iconPicker.on('select', instance => {
    console.log('Select:', instance);


After we initialize IconPicker, we have access instance. Let’s look list all available methods:

Method Description
on() Add event handler
off() Remove event handler
open() Open IconPicker’s modal
hide() Remove IconPicker’s modal
isOpen() Check if open or not
destroy(deleteInstance) Set it to false (by default it is true) to not to delete IconPicker instance


MIT Licence


View Github