Taiga UI 5.0 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="@tui.search" />

    

      
      
    

  
    
      :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);
    }
}
GitHub StackBlitz