Icon

<ui-icon name="bell" />

Custom sets

You may register additional icon sets and then reference them from the component with the set prop.

<ui-icon name="academic-cap" set="heroicons" />

Register them using the registry API using a glob import. This will include all the icons in the directory in your JS bundle.

import { registerIconSet } from '@statamic/ui';

registerIconSet('heroicons', import.meta.glob(
    './path/to/heroicons/*.svg', 
    { query: '?raw', import: 'default' }
));

If you have a situation where you need custom icons that cannot be included in the bundle (for example, how Statamic itself allows you to bring your own icons), you can provide them as strings.

import { registerIconSetFromStrings } from '@statamic/ui';

registerIconSetFromStrings('heroicons', {
    'academic-cap': '<svg>...</svg>',
    'adjustments-horizontal': '<svg>...</svg>',
});