A Minimal Cool Aesthetic Icon Picker In JavaScript

Aesthetic is a beautiful, sensitive icon picker that supports almost all open source icon libraries such as Font Awesome (default), bootstrap icons, material icons, and more.

It also provides a Vue.js wrapper that you can easily integrate the icon picker into your Vue.js 3 app. You can download Vue.js 3 for the icon picker here.

How to make use of it:

1. Include an icon library on your web page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/VERSION/css/all.min.css" />

2. Include the Aesthetic Icon Picker’s information on the web page.

<link rel="stylesheet" href="assets/css/style.css" />
<script src="assets/js/aesthetic-icon-picker.js"></script>

3. Create the HTML for the icon picker.

<div class="icon-picker-wrap" id="icon-picker-wrap">
  <ul class="icon-picker">
    <!-- Clear Button -->
    <li class="icon-none" title="None"><i class="fas fa-ban"></i></li>
    <!-- Select Button -->
    <li id='select-icon' class="select-icon" title="Icon Library"><i class="fas fa-circle"></i></li>
    <!-- Store The Icon Value You Selected -->
    <input type="hidden" name="icon_value" id="icon_value" value="">
  </ul>
</div>

4. Initialize the icon picker and finished.

AestheticIconPicker({
  // must be an ID
  'selector': '#icon-picker-wrap', 
  // must be an ID
  'onClick': '#select-icon',  
});

5. Add an extra icon library to the icon picker as follows:

var newIcon = {
    "customIconLib":{
      "regular":{
        "prefix": "customIcon-",
        "icon-style": "custom-regular",
        "list-icon":"custom",
        "icons":["custom-icon-1", "custom-icon-2", ...]
      },
      "solid":{
        "prefix": "customIcon-",
        "icon-style": "custom-solid",
        "list-icon":"custom",
        "icons":["custom-icon-1", "custom-icon-2", ...]
      },
      // ...
    }
}

AestheticIconPicker({
  // must be an ID
  'selector': '#icon-picker-wrap', 
  // must be an ID
  'onClick': '#select-icon',  
  // register the custom icon library
  'iconLibrary': newIcon
});

Beautiful Icon Picker, Aesthetic Icon Picker Plugin/Github