Bootstrap 5 Icon Picker – iconpicker

Category: Javascript | February 23, 2021
Author: dogukanakkaya
Views Total: 200 views
Official Page: Go to website
Last Update: February 23, 2021
License: MIT


Bootstrap 5 Icon Picker – iconpicker


A Bootstrap 5 based icon picker that supports any icon libraries like Bootstrap Icons, Font Awesome, etc.

How to use it:

1. Load the latest Bootstrap 5 framework and the iconpicker’s files in the document.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Icon Picker -->
<script src="/path/to/dist/iconpicker.js"></script>

2. Or install & import the iconpicker with NPM.

$ npm i codethereal-iconpicker
import Iconpicker from 'codethereal-iconpicker'

3. Load an icon library in the document.

<link rel="stylesheet" href="[email protected]/font/bootstrap-icons.css" />

4. Build the HTML for the icon picker.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text h-100 selected-icon"></span>
  <input type="text" class="form-control iconpicker">

5. Initialize the icon picker and done.

new Iconpicker(document.querySelector('.iconpicker'), {
    showSelectedIn: document.querySelector('.selected-icon'),
    defaultValue: 'bi-alarm'

6. Use another icon library (Font Awesome Iconic Font in this example) by overriding the value format as follows:

new Iconpicker(document.querySelector('.iconpicker'), {
    showSelectedIn: document.querySelector('.selected-icon'),
    icons: ['fa-times', 'fa-check'],
    valueFormat: val => `fa ${val}`

7. All default options:

new Iconpicker(document.querySelector('.iconpicker'), {

    // hide the icon picker on select
    hideOnSelect: true,

    // CSS class added to the selected icon
    selectedClass: 'selected',

    // default icon
    defaultValue: '',

    // all icons
    icons: ['bi-alarm-fill', ...],

    // is searchable?
    searchable: true,

    // CSS class added to the container
    containerClass: '',

    // element to show selected icon
    showSelectedIn: '',

    // enable fade animation
    fade: false,

    // custom value format
    valueFormat: val => `bi ${val}`,


8. Set icons manually.

// reset

// or

// set an icon


v1.1.5 (02/23/2021)

  • 47 new icons added

v1.1.4 (02/07/2021)

  • reset func -> set func

You Might Be Interested In:

Leave a Reply