Universal Icon Picker

Language: Vanilla JS Dependencies: none GitHub file size in bytes GPLv3 license

Nice small Javascript Icon Picker for any icon library

Vanilla JavascriptNo dependency2.6ko gzipped

Originally forked from aesthetic-icon-picker




  • Load any icon library from a single JSON file
  • Load the icon fonts stylesheets from local files or CDNs
  • Autoload the icon fonts (JSON + stylesheets) or load them only on request
  • Add as many icon libraries as you like to each instance of the plugin
  • Create multiple instances and triggers on the same page
  • Change the icon libraries attached to an instance whenever you want
  • Group icons of the same family by categories
  • Load one or more styles from the same icon family individually
  • Search / Filter icons
  • Built-in onSelect() and onReset() callback functions
  • Attach the Icon Picker to any HTML element
  • Add your favourite icon libraries very easily

Integrated icon libraries

Font Awesome

  • All
  • Solid
  • Regular
  • Brands

Material Icons

  • Filled
  • Outlined
  • Round
  • Sharp
  • Two-tone

Other icon libraries

  • Bootstrap Icons
  • Elegant Icons
  • Feather Icons
  • Foundation Icons
  • Happy Icons
  • Icomoon
  • Open-iconic
  • Tabler Icons
  • Weather Icons
  • Zondicons


Clone / download or install with npm

  npm install @migliori/[email protected]


<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <button id="selector" title="Open the icon picker">Click to open</button>
    <script src="universal-icon-picker/assets/js/universal-icon-picker.min.js"></script>

        document.addEventListener('DOMContentLoaded', function(event) {
            var uip = new UniversalIconPicker('#selector', options);




option type value
iconLibraries Array Array of JSON icon libraries in assets/icons-libraries.Default: null
iconLibrariesCss Array Array of CSS icon libraries in assets/stylesheets or from any CDN.Default: null
mode String 'autoload' or 'onrequest'. Default: 'autoload'
onReset Function Callback function when the user clicks the reset button.Default: null
onSelect Function Callback function when the user clicks the insert button.Default: null
resetSelector String Selector for the HTML reset button on your page.Default: null


const options = {
    iconLibraries: [
    iconLibrariesCss: [
    resetSelector: '#uip-reset-btn',
    onSelect: function(jsonIconData) {
        document.getElementById('output-icon').innerHTML = jsonIconData.iconMarkup;

        /* will output something like:
            "libraryId": "fa-solid",
            "libraryName": "fontAwesome",
            "iconHtml": "<i class=\"fa-solid fa-oil-can\"></i>",
            "iconMarkup": "&lt;i class=&quot;fa-solid fa-oil-can&quot;&gt;&lt;/i&gt;",
            "iconClass": "fa-solid fa-oil-can",
            "iconText": ""
    onReset: function() {
        document.getElementById('output-icon').innerHTML = '';

// Instanciate the Icon Picker
var uip = new UniversalIconPicker('#selector', options);

See the source code of the demo for more examples

Public methods

  • setOptions(options)

    Update the options of an Icon Picker instance


      // Instanciate the Icon Picker
    var uip = new UniversalIconPicker('#selector', options);
    // later, change the icon libraries
        iconLibraries: ['weather-icons.min.json'],
        iconLibrariesCss: ['weather-icons.min.css']

    Live demo: https://universal-icon-picker.miglisoft.com/demo/demo-4.html


Universal Icon Picker Screenshot


Contributions are always welcome!

Please contact us for any improvement suggestions or send your pull requests



  • First release
  • fix icon selections when changing the icon library programatically with setOptions()
  • update README




Thanks to Sabbir for his Aesthetic Icon Picker, which gave me a clean & strong base code for this project.


View Github