Icon CORE

Using @tui. , @img. and @font. prefixes to set icon resolution mode. Control font using --tui-font-icon variable.

By default icons follow font-size in both icon size and container size. You can set custom container size by explicit inline-size / block-size . Built-in Lucide icons also support setting thickness via --tui-stroke-width variable.

Combining icons for 2 colors or badge-like effect and using pipe to resolve icon URL by name.

By default icons are loaded as assets when they first appear in the DOM and then cached according to your server policy, just like any image. You can also provide a dictionary of icons to be included in the bundle instead using tuiIconsProvider .

You can use tuiAssetsPathProvider helper to set a custom path for icon assets or use tuiIconResolverProvider to completely override name to path resolution logic. Keep in mind "/" symbol is not allowed in icon's name because then it is treated as URL.

You can pass external icons as URLs or base64 encoded strings. Set --tui-stroke-width to 0px if you are seeing skewed proportions, for example if your SVGs do not have viewBox or you are using PNGs.

Using one icon as a background for another.