Icon

Icons render inline SVG from a built-in lucide subset (138 icons). Register more icons — SVG, or font-icon classes from any icon font — through registerIcons() or config.icons.

Built-in icons

Built-in icons

Vue

<div class="icon-grid">
  <div v-for="n in names" :key="n" class="icon-cell"><ThlIcon :name="n" :size="22" /><small>{{ n }}</small></div>
</div>

React

import { Icon } from '@thl-ui/react';
<Icon name="bell" size={22} />
<Icon name="heart" label="Favourite" />   {/* label → role="img" */}

Angular

<thl-icon name="bell" [size]="22" />
<thl-icon name="heart" label="Favourite" />

Registering icons

import { registerIcons } from '@thl-ui/icons';

registerIcons({
  // SVG path nodes (lucide format)…
  logo: [['path', { d: 'M12 2 2 7l10 5 10-5-10-5z' }]],
  // …raw SVG…
  brand: { svg: '<circle cx="12" cy="12" r="10"/>', viewBox: '0 0 24 24' },
  // …or font-icon classes from an icon font
  'fa-user': { className: 'fa fa-user' },
  'ti-home': { className: 'ti-home' },
});

Or pass icons in the adapter config (app.use(ThlUI, { icons }), <ThlProvider config=>, provideThlUI({ icons })). Any component prop named icon accepts these names.

API

Icon

<ThlIcon> · import { ThlIcon } from '@thl-ui/vue'

Prop	Type	Default
name*	string	—
size	any	—
label	string	—
strokeWidth	number	—