Icon
Icons are small visual symbols used to represent actions, objects, or concepts.
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>Schemes
Section titled “Schemes”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.
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>