Universal Icon Picker For Popular Icon libraries

A customizable, beautiful icon picker for popular icon libraries like Font Awesome, Material Icons, Bootstrap Icons, and more.

It fetches icon data from JSON and Stylesheet and displays an icon selection popup where users are able to easily and quickly find the icon they need right.

Icon Libraries Supported:

• Font Awesome (All, Solid, Regular, Brands)
• Material Icons (Filled, Outlined, Round, Sharp, Two-tone)
• Bootstrap Icons
• Elegant Icons
• Feather Icons
• Foundation Icons
• Icomoon
• Open-iconic
• Tabler Icons
• Weather Icons
• Zondicons
• Fomantic UI icons

How to use it:

1. Download and load the universal-icon-picker.js library.

<script src="assets/js/universal-icon-picker.min.js"></script>

2. Create an element to trigger the icon picker.

<button id="example">
  Open The Icon Picker
</button>

3. Initialize the UniversalIconPicker and specify the icon libraries to load.

var myIconPicker = new UniversalIconPicker('#example',{
    iconLibraries: [
      'bootstrap-icons.min.json',
      'elegant-icons.min.json',
      'feather-icons.min.json',
      'font-awesome.min.json',
      'foundation-icons.min.json',
      'happy-icons.min.json',
      'icomoon.min.json',
      'material-icons-filled.min.json',
      'material-icons-outlined.min.json',
      'material-icons-round.min.json',
      'material-icons-sharp.min.json',
      'material-icons-two-tone.min.jsonn',
      'open-iconic.min.json',
      'tabler-icons.min.json',
      'weather-icons.min.json',
      'zondicons.min.json',
    ],
    iconLibrariesCss: [
      // from CDN
      'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css',
      'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css',
      // OR from local
      'happy-icons.min.css',
    ],
});

4. Create an element to reset the icon picker.

<button id="clear">
  Reset The Icon Picker
</button>

var myIconPicker = new UniversalIconPicker('#example',{
    resetSelector: '#clear',
    onReset: function() {
      //  do something
    }
});

5. Trigger a function when an icon gets picked.

var myIconPicker = new UniversalIconPicker('#example',{
    onSelect: function(jsonIconData) {
      // jsonIconData.libraryId
      // jsonIconData.libraryName
      // jsonIconData.iconHtml
      // jsonIconData.iconMarkup
      // jsonIconData.iconClass
      // jsonIconData.iconText
  },
});

6. Update options.

myIconPicker.setOptions({
  // new options here
});

Changelog:

v1.1.9 (05/02/2025)

• add Fontawesome PRO icons listing tool

v1.1.8 (07/26/2023)

• add the type=”button” attribute to the icon picker button

v1.1.7 (07/26/2023)

• update icon picker to attach to a specific parent element

v1.1.6 (03/31/2023)

• update

v1.1.5 (02/09/2023)

• add Fomantic UI icons

The post Universal Icon Picker For Popular Icon libraries appeared first on CSS Script.