Icons act as visual aids to help users complete tasks. They should be used purposefully.
Our Icons are pulled from Material Design.
These icons represent commonly used icons in general UI situations. More specific icons can be used in specific contexts.
While most of our icons are Material Icons, we offer some custom 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.
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.
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.
In addition to the above Icons, we provide the majority of Material's solid-style icons.