Iconography

The visual language of symbols used to represent actions, objects, or ideas in a clear and recognizable way.

General guidelines

• Every icon should serve a purpose, communicating status, guiding action, or reinforcing content
• Icons should clarify meaning or draw attention, not serve as the only way to communicate information
• Choose icons with widely recognized meanings to avoid confusion and support accessibility
• Make sure the icon’s concept directly relates to the action or content it represents
• Use the same icon for the same action or concept across all services and products
• Ensure icons meet color contrast requirements, and provide text labels or tooltips when meaning isn’t immediately clear
• Only use icons from the Phosphor open-source icon set, or the custom icons offered by the Massachusetts Design System

Phosphor icons

The Massachusetts Design System uses the Phosphor open-source icon library that offers a wide range of clean, flexible icons designed to work across web and mobile interfaces. 

Phosphor provides a variety of weights, but only 2 should be used when designing digital interfaces:

• Regular weight: Used on icon instances larger than 24px
• Bold weight: Used on icon instances of 24px and below

Phosphoricons.com

Custom icons

A small collection of custom icons have been designed to complement Phosphor's visual style. These icons address specific Massachusetts government needs where Phosphor's existing library doesn't provide suitable options.

If you need a specific icon that is not provided by Phosphor, please reach out to the team at [e-mail].