Full Documentation
Our Icons are pulled from Material Design.
Common UI Icons
These icons represent commonly used icons in general UI situations. More specific icons can be used in specific contexts.
Custom Icons
While most of our icons are Material Icons, we offer some custom icons.
Actions with Icons
When giving a user the ability to perform an action through an Icon, such as opening a menu or editing an item, the Icon should be paired with Button Icons. This insures consistent styling and functionality of icon-only actions across the application.
Tooltips
In general, icons that stand on their own should have a tooltip. This provides important context to what the Icon represents when a user hovers.
Color
Icon colors can reflect their use case. In general, icons are a dark gray, with other color uses to denote a status or a link. Icons should generally meet the WCAG AA color contrast guidelines, but can be lighter on larger icons with some form of label. On a pure white background, icons should generally be Neutral 90 or darker. Button Icons are constrained to the color properties of Buttons.
Disabled-state Icons generally have a 60% opacity applied. Use caution with lighter gray icons, as they may be confused with a disabled state.
List of all available icons
In addition to the above Icons, we provide the majority of Material's solid-style icons.
Best Practices
- Icons without a text label should have a tooltip component.
- Icon colors should meet at least WCAG AA color contrast.
- Example: On a pure white background, icons should not be brighter than Neutral 90.
Importing
import { Icon } from "@servicetitan/design-system"