Taiga UI 5 is out!

Icon CORE

Examples API GitHub

On this page

A component to show icons and color them with CSS. Taiga UI ships with Lucide icons . Same mechanism is used in all iconStart / iconEnd inputs across the library.

Basic

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

      
      
    

  
    
      <tui-icon icon="@tui.heart" />
<tui-icon icon="@img.mastercard" />
<tui-icon icon="@font.home" />

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
    color: var(--tui-text-action);

    --tui-font-icon: 'Material Symbols Outlined';
}

Parameters

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. 
    
      
    

      
      
    

  
    
      <tui-textfield iconEnd="@tui.scaling">
    <label tuiLabel>Container</label>
    <input
        postfix="px"
        tuiInputSlider
        [max]="48"
        [min]="16"
        [(ngModel)]="container"
    />
    <input
        tuiSlider
        type="range"
    />
</tui-textfield>

<tui-textfield iconEnd="@tui.image-upscale">
    <label tuiLabel>Icon</label>
    <input
        postfix="px"
        tuiInputSlider
        [max]="48"
        [min]="16"
        [(ngModel)]="icon"
    />
    <input
        tuiSlider
        type="range"
    />
</tui-textfield>

<tui-textfield iconEnd="@tui.line-squiggle">
    <label tuiLabel>Stroke</label>
    <input
        postfix="px"
        tuiInputSlider
        [max]="3"
        [min]="1"
        [tuiNumberFormat]="{precision: 1}"
        [(ngModel)]="thickness"
    />
    <input
        tuiSlider
        type="range"
        [step]="0.1"
    />
</tui-textfield>

<tui-icon
    icon="@tui.user"
    [style.--tui-stroke-width.px]="thickness"
    [style.block-size.px]="container"
    [style.font-size.px]="icon"
    [style.inline-size.px]="container"
/>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

tui-icon {
    margin: 1rem;
    align-self: center;
    box-shadow: 0 0 0 0.125rem var(--tui-border-normal);
}

Features

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

      
      
    

  
    
      <tui-icon
    background="@tui.info-filled"
    icon="@tui.info"
/>
<tui-icon
    badge="@tui.star"
    icon="@tui.user"
/>
<img
    alt=""
    [src]="'@tui.mastercard' | tuiIcon"
/>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}

tui-icon {
    color: var(--tui-text-action);

    &:first-child {
        color: var(--tui-status-negative);
        background-color: var(--tui-status-negative-pale-hover);
    }

    &::after {
        color: var(--tui-status-warning);
    }
}

img {
    inline-size: 1.5rem;
    block-size: 1.5rem;
}

Bundled

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 . 
    
      
    

      
      
    

  
    
      <tui-icon icon="@tui.heart" />
<tui-icon icon="@img.mastercard" />

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
    color: var(--tui-text-action);
}

Resolver

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. 
    
      
    

      
      
    

  
    
      <tui-icon icon="@tui.heart" />
<tui-icon icon="discord" />

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
    color: var(--tui-text-action);
}

External

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. 
    
      
    

      
      
    

  
    
      <tui-icon icon="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" />
<tui-icon icon="https://cdn-icons-png.flaticon.com/64/12710/12710759.png" />
<tui-icon [icon]="icon" />

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
    color: var(--tui-text-action);

    --tui-stroke-width: ~'0px';
}

Background

Using one icon as a background for another. 
    
      
    

      
      
    

  
    
      <tui-icon
    background="@tui.wifi"
    icon="@tui.wifi"
/>
<tui-icon
    background="@tui.wifi"
    icon="@tui.wifi-high"
/>
<tui-icon
    background="@tui.wifi"
    icon="@tui.wifi-low"
/>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}

tui-icon {
    background: var(--tui-border-normal);
    color: var(--tui-status-warning);

    &:first-child {
        color: var(--tui-status-positive);
    }

    &:last-child {
        color: var(--tui-status-negative);
    }
}

Icon fonts

Make sure to include the actual font somewhere in your app as instructed by your icon font vendor.

Material Symbols Outlined has user friendly naming, the actual word home gets turned into a house icon:

FontAwesome uses Private Use Area of Unicode to turn \f004 into a heart icon, which you can pass as the icon name:

Alternatively, you can pass empty icon name and use FontAwesome classes to get the same result for the basic case, because it also uses ::before pseudo-element:

Ultimately, what you put after @font. goes into CSS content and gets displayed using font defined via --tui-font-icon variable.

The rest is determined by the font you use and you should consult its documentation.

    
      
    

      
      
    

  
    
      <p>
    <b>Material Symbols Outlined</b>
    has user friendly naming, the actual word
    <code>home</code>
    gets turned into a house icon:
</p>
<tui-icon
    icon="@font.home"
    class="material"
/>
<p>
    <b>FontAwesome</b>
    uses Private Use Area of Unicode to turn
    <code>\f004</code>
    into a heart icon, which you can pass as the icon name:
</p>
<tui-icon
    icon="@font.\f004"
    class="awesome"
/>
<p>
    Alternatively, you can pass empty icon name and use
    <b>FontAwesome</b>
    classes to get the same result for the basic case, because it also uses
    <code>::before</code>
    pseudo-element:
</p>
<tui-icon
    icon="@font."
    class="awesome fa-heart"
/>
<p>
    Ultimately, what you put after
    <code>&commat;font.</code>
    goes into CSS
    <code>content</code>
    and gets displayed using font defined via
    <code>--tui-font-icon</code>
    variable.
</p>
<p>The rest is determined by the font you use and you should consult its documentation.</p>

    

      
      
    

  
    
      .material {
    --tui-font-icon: 'Material Symbols Outlined';
}

.awesome {
    --tui-font-icon: 'Font Awesome 6 Free';
}
GitHub StackBlitz