Icon Picker PREMIUM

Unified icon selection from Font Awesome and RSL Icons with full accessibility support

Key Features

Fully Accessible

WCAG 2.1 AA compliant with full keyboard navigation and screen reader support

Font Awesome Integration

180+ curated Font Awesome icons with categories and search

RSL Icons

80+ custom RSL SVG sprite icons for framework consistency

Unified Search

Search across all icon sources by name, category, or keyword

Recent Icons

Quick access to recently selected icons with localStorage persistence

Preview Panel

Multi-size preview with icon name, source, and usage details

Quick Start

Step 1: Include the CSS and JavaScript files:

Required Files • HTML
<!-- Font Awesome for FA icons -->
<script src="https://kit.fontawesome.com/YOUR_KIT.js"></script>

<!-- Icon Picker CSS and JS -->
<link rel="stylesheet" href="styles/icon-picker.css">
<script src="javascript/icon-picker.js"></script>

Step 2: Add the data attribute to any input element:

Basic Usage • HTML
<!-- Basic icon picker -->
<input type="text" data-rsl-icon-picker>

<!-- With default source and category filter -->
<input type="text"
       data-rsl-icon-picker
       data-default-source="fontawesome"
       data-default-category="interface">

<!-- RSL Icons only mode -->
<input type="text"
       data-rsl-icon-picker
       data-sources="rsl">

Data Attributes API

Attribute Type Default Description
data-rsl-icon-picker - - Required. Initializes the icon picker
data-sources string "all" Icon sources: "all", "fontawesome", "rsl", or comma-separated
data-default-source string "all" Default source filter when dialog opens
data-default-category string "all" Default category filter when dialog opens
data-value string null Initial icon value (icon ID)
data-placeholder string "Select an icon..." Placeholder text when no icon selected
data-show-recent boolean true Show recently selected icons section
data-recent-limit number 12 Maximum number of recent icons to display
data-show-preview boolean true Show the preview panel with icon details
data-show-search boolean true Show the search input
data-close-on-select boolean true Close dialog immediately when an icon is selected
data-disabled boolean false Disable the icon picker
data-required boolean false Mark as required for form validation
data-filterbus-topic string - FilterBus topic to publish/subscribe for cross-component filtering
data-aria-label string "Icon picker" Accessibility label for screen readers

JavaScript API

Method Parameters Returns Description
init() - this Initialize all icon pickers on the page
create(element, options) element, options instance Create an icon picker on a specific element
getInstance(element) element instance Get the instance for an element
getValue(instance) instance object Get current value: {source, id, name, class, html}
setValue(instance, icon) instance, icon - Set the selected icon by ID or object
open(instance) instance - Open the icon picker dialog
close(instance) instance - Close the icon picker dialog
clear(instance) instance - Clear the selected icon
destroy(instance) instance - Destroy the icon picker and clean up
getIconManifest(source) source array Get all icons for a source ("fontawesome" or "rsl")
getCategories(source) source array Get available categories for a source
Pro Tip: The getIconManifest() and getCategories() methods are useful for building custom icon displays or extending the component with additional icon sources!

Return Value Object

When an icon is selected, getValue() returns an object with these properties:

Property Type Example Description
source string "fontawesome" Icon library source
id string "fa-home" Unique icon identifier
name string "Home" Human-readable name
category string "interface" Icon category
class string "fas fa-home" CSS class for Font Awesome icons
html string "<i class='fas fa-home'></i>" Ready-to-use HTML markup
svg string "<svg>...</svg>" SVG markup (RSL icons only)
Using the Return Value • JS
const picker = document.querySelector('[data-rsl-icon-picker]');
const value = RSL.IconPicker.getValue(picker);

// Use in your application
document.querySelector('.icon-display').innerHTML = value.html;
console.log('Selected:', value.name, 'from', value.source);

Events

Event Detail Properties Description
rsl-icon-change source, id, name, class, html, svg Fired when an icon is selected
rsl-icon-clear - Fired when selection is cleared
rsl-icon-open - Fired when the dialog opens
rsl-icon-close - Fired when the dialog closes
Event Handling • JS
document.querySelector('[data-rsl-icon-picker]').addEventListener('rsl-icon-change', function(e) {
    console.log('Selected icon:', e.detail.name);
    console.log('Source:', e.detail.source);
    console.log('HTML:', e.detail.html);

    // Update a preview element
    document.querySelector('.preview').innerHTML = e.detail.html;
});

Accessibility

The RSL Icon Picker is designed from the ground up for accessibility:

FilterBus Integration

The Icon Picker integrates with RSL's FilterBus for cross-component filtering:

FilterBus Example • HTML
<!-- Icon picker publishes to 'icon-selected' topic -->
<input type="text"
       data-rsl-icon-picker
       data-filterbus-topic="icon-selected">

<!-- Other components can subscribe to react -->
<script>
RSL.FilterBus.subscribe('icon-selected', function(data) {
    console.log('Icon changed:', data.icon);
    // Update other components based on selected icon
});
</script>

JSON Layout V2 API V2

The Icon Picker can be rendered programmatically using the JSON Layout V2 API:

JSON Layout V2 Usage • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "icon-picker-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "icon-field",
        content: {
            type: "iconpicker",
            sources: "all",              // "all", "fa", "rsl"
            defaultSource: "all",
            defaultCategory: "navigation",
            placeholder: "Select an icon",
            showRecent: true,
            showPreview: true,
            closeOnSelect: false,
            ariaLabel: "Choose an icon"
        }
    }]
});
Full Examples: See the Icon Picker JSON API Examples page for 7 comprehensive examples with configuration options and event handling.

Next Steps

See Examples

View examples.html for comprehensive demos

JSON API Examples

Programmatic creation in V2 API examples

Try the Playground

Test features in playground.html

Explore Components

Browse all RSL components