Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesAccessibilityColorsIconographyTemplatesTypography

Foundations Iconography

Icons are images that represent an idea. Using icons helps save space, makes it easier for users to understand content, and improves accessibility. When combined with text, they identify important details and actions. The State of Michigan uses outline icons based on IBM's Carbon Icons.

Best practices

  • Most icons should be accompanied by text unless their meanings are unambiguously clear. Examples of icons with clear meaning include search, filter, hamburger menus, and icons commonly used in other apps.
  • Icons should typically be left aligned if placed above text, or center aligned to the first line of text.
    An image demonstrating vertical and horizontal alignment as described in the caption below.

    This image demonstrates horizontal and vertical icon stacking. The checkmark icon is center aligned horizontally to the left of the text reading 'Message Sent' in the success alert on the left. The stacked icon is left aligned vertically above the text reading 'Components' in the card on the right.

  • Icons should only be used in situations where they lend clarity to the accompanying content. They shouldn't be used to clarify confusing page structures, or in situations where photos or illustrations would work better.
  • Icons shouldn't be color dependent—users should be able to identify what an icon represents, such as a status change, no matter the color of the icon.
  • Use icons consistently across your app. For example, when you use an icon of a wheelchair user to indicate where accessibility tools are located on one page, you shouldn't switch to using a different icon for another page.
  • Icons are only clickable when inside a button. The icon can precede text in a button or exist without text if the meaning is clear. For more information, see the [Buttons](/docs/Components/Button/som-button) page.
    An image showing the difference between a clickable icon and an icon that isn't clickable, as described below.

    The image above shows what a button with an icon looks like. A chevron pointing right is inside of a button, which is clickable. The lock icon that's left aligned of the text is not clickable because it's not inside a button.

    • Filled icons are only used to indicate the status of controls that are toggled using a button.
      An outline of a heart, representing a favorite, to the left of a heart with a red fill.

      In this example, when a user favorites an item, the icon fills in to show the toggled status.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Open source