Skip to content

CSS

<i class="tng-icon icon-car"></i>

See the icons reference for all icons available per brand.

Sizes

Section titled “Sizes”

The default size is sm.

<i aria-hidden class="tng-icon icon-car is-sm"></i>
<i aria-hidden class="tng-icon icon-car is-md"></i>
<i aria-hidden class="tng-icon icon-car is-lg"></i>

Brand icons step 20px, 40px and 80px; UI icons — the icon-ui-* set — step 12px, 24px and 40px.

Every size modifier does one thing: set --tng-icon-size, which is what the icon’s width and height read. An instance that needs a size off the scale can set it directly, without a modifier.

<i
  aria-hidden
  class="tng-icon icon-car"
  style="--tng-icon-size: 3.2rem"
></i>

Adaptive coloring

Section titled “Adaptive coloring”

Almost all icons will automatically adapt to the current scheme, except those that are specifically designed to have fixed colors.

<i aria-hidden class="tng-icon icon-bell-notification is-lg"></i>
<i aria-hidden class="tng-icon icon-iso is-lg"></i>
<i aria-hidden class="tng-icon icon-rating-star-empty is-lg"></i>
<i aria-hidden class="tng-icon icon-rating-star-full is-lg"></i>
<i aria-hidden class="tng-icon icon-user-notification is-lg"></i>

Spinner

Section titled “Spinner”

We have one special UI icon to indicate loading state. This icon spins by default.

<i aria-hidden class="tng-icon icon-ui-spinner is-lg"></i>