Icon

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

Default
Contrast

See the icons reference for all icons available per brand.

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>

Default
Contrast

Scheme

Almost all icons will automatically adapt to the current scheme, except those that are duotone.

<i aria-hidden class="tng-icon icon-bell-notification is-lg"></i>

Default
Contrast

Accessibility

Decorative Icons

When using icons that are purely decorative, you should add aria-hidden="true" to the icon element to ensure it is ignored by assistive technologies.

<i class="tng-icon icon-car" aria-hidden="true"></i>

Informative Icons

When using icons that convey meaning, you should provide a text alternative. This can be done in many different ways. Use whatever makes sense.

<i class="tng-icon icon-download" aria-label="Download"></i>

<button class="tng-icon-button" aria-label="Download">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
</button>

<button class="tng-icon-button">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
  <span class="sr-only">Download</span>
</button>