HUI Icon Picker

Accessible, framework-agnostic icon picker delivered as a Web Component. Designed to pair with any icon font, included is Bootstrap Icons and Material Symbols Rounded. You can easily add any other font / families you need however.

Quick Start

Install the package and the Bootstrap Icons font dependency:

npm install @huement/hui-icon-picker bootstrap-icons

Then load the component (bundlers and browsers without modules are both supported):

import '@huement/hui-icon-picker/dist/hui-icon-picker.js';

Include the icon styles in your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material-symbols/[email protected]/material-symbols-rounded.min.css" />

Finally, drop the component onto the page:

<hui-icon-picker></hui-icon-picker>

Attributes & Properties

• value (string) – Stores the selection in the format family:iconName. Updates automatically when the user picks or clears an icon.
• family (string) – Sets the active family (bootstrap or material).
• families (comma separated string) – Restrict which families to expose. Example: families="bootstrap".
• label (string) – Overwrites the trigger label (defaults to Icon).
• placeholder (string) – Text to show before a selection is made.
• disabled (boolean attribute) – Disables the trigger.

Every attribute is reflected as a JavaScript property (picker.value, picker.family, etc.).

Events

• icon-select – Fired whenever the user chooses an icon. event.detail contains { family, name, preview }.
• icon-clear – Fired when the selection is cleared.
• Standard input and change events also bubble for easy form integration.

The component is form-associated, so give it a name attribute and it will submit like a native input.

<form>
  <hui-icon-picker name="icon" value="bootstrap:rocket"></hui-icon-picker>
</form>

Styling & Theming

The picker uses CSS custom properties that you can override on the host element:

hui-icon-picker {
  --hui-picker-accent: #ff6b6b;
  --hui-picker-border-radius: 16px;
  --hui-picker-icon-size: 2rem;
}

Programmatic API

const picker = document.querySelector('hui-icon-picker');
picker.openPicker(); // opens the modal
picker.selectIcon('rocket', 'bootstrap');
picker.clear();

Helper exports are available for custom integrations:

import { ICON_FAMILIES, resolveFamilies } from '@huement/hui-icon-picker';

Building Locally

npm install
npm run build

• dist/hui-icon-picker.js – UMD bundle with source maps
• dist/hui-icon-picker.min.js – Minified UMD bundle
• dist/hui-icon-picker.d.ts – Generated TypeScript definitions

Use npm run watch for live rebuilds and npm run clean to wipe all build outputs.

Browser Support

The component targets evergreen browsers with Custom Elements, Shadow DOM, and ElementInternals support. Older browsers can be supported with Web Component polyfills.

Come Check Us Out!

License

ISC © Huement