Universal Icon Picker For Popular Icon libraries

Category: Javascript , Recommended | March 31, 2023
Views Total:623 views
Official Page:Go to website
Last Update:March 31, 2023


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:

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

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

var myIconPicker = new UniversalIconPicker('#example',{
    iconLibraries: [
    iconLibrariesCss: [
      // from CDN
      // OR from local

4. Create an element to reset the icon picker.

<button id="clear">
  Reset The Icon Picker
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.

  // new options here


v1.1.6 (03/31/2023)

  • update

v1.1.5 (02/09/2023)

  • add Fomantic UI icons

You Might Be Interested In:

Leave a Reply