Icon
See the icons reference for all icons available per brand.
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>Scheme
Section titled “Scheme”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-car is-lg"></i><i aria-hidden class="tng-icon icon-bell-notification 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>Spinner
Section titled “Spinner”We have one special UI icon to indicate loading state. This icon spins by default.
Accessibility
Section titled “Accessibility”Decorative Icons
Section titled “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
Section titled “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>