Icons act as visual aids to help users complete tasks. They should be used purposefully.
Using Anvil Icons
Detailed design spec, usage guidelines, and implementation guidelines for the Icon component can be found here.
Internal employees can learn about contributing an icon to Anvil here.
Material & Anvil
Anvil uses Material icons throughout the product so we’ve kept our grid relatively simple and familiar.
Sizing
Icon sizing in Anvil follows the typical use case as Material. In general, it’s best practice to design in 16x and 24x sizes.
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, you can use the Button with an icon. This ensures 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.
Color
Icon colors can reflect their use case. In general, icons are black (Neutral-400), 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.
For additional guidance on using color with icons, see our spec guidelines.
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.
Standardized Icons
Last modified on January 23, 2026
