Iconography

All icons are delivered as SVGs (Scalable Vector Graphics), an image format that compresses well, can scale without losing clarity, looks great on retina displays, and provides design control like interactivity, color fills, and filters.

Editorial icons

There are six custom, editorial icons in the design system.

Four were introduced to symbolize each core activity of the Institute’s mission (on the About page). Stylistically, they were drawn for use at small sizes and should not be enlarged. The table below outlines which icon pairs with which part of the Institute’s mission.

The following rules can help guide the extension of this set per the Institute’s needs:

• Each icon uses Black strokes of 2px and 2.5px and Cranberry fills.
• The Cranberry fills do not overlap any Black strokes.
• If the Black and Cranberry shapes overlap, the Cranberry fill should be surrounded by a 2.5px stroke in the color of the field the icon will sit on.

The other two editorial icons accompany sitewide messaging surrounding signing up for the e-mail newsletter and donating to the Institute. These icons use only strokes—of 2px and 2.5px widths.

Utility icons

The majority of task-focused icons on the site were selected from Google’s Material Design Icons, an open-source icon set with over 400 icons.