[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc.

Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons

How to make use of it:

1. Load the newest Bootstrap 5 framework and the icon pickers files.

<!-- 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 set up & import the icon picker with NPM.

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

3. Load an icon library within the document.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[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.

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

6. Use one other icon library (Font Awesome Iconic Font in this instance) 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}`,


Must Read: Easy and Simple Emoji Picker with Using JavaScript | fgEmojiPicker.js


See Demo And Download

Official Website(dogukanakkaya): Click Here

This superior jQuery/javascript plugin is developed by dogukanakkaya. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…