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.
Icon | Class name | Usage |
---|---|---|
.icon-pencil-paper
|
Publish papers and fund grants | |
.icon-apple-book
|
Engage students | |
.icon-globe-pin
|
Host events | |
.icon-speech-bubbles
|
Inform and educate |
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.
Icon | Class name | Usage |
---|---|---|
.icon-support-gray | Sponsor the Institute | |
.icon-newsletter-0 | Newsletter signup | |
.icon-newsletter-open-0 | Newsletter signup hover |
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.
Icon | Class name | Usage |
---|---|---|
.icon-search-magenta
|
Search | |
.icon-expand38-white , .icon-expand38-gray , .icon-expand38-magenta
|
Form select dropdown | |
.icon-keyboard53
|
Primary button, primary call-to-action link | |
.icon-keyboard53-gray
|
Breadcrumb separator | |
.icon-add186-magenta
|
Trigger to reveal hidden content | |
.icon-close-magenta
|
Close | |
.icon-call49-magenta
|
External link arrow | |
TBD
|
Enlarge an image | |
TBD
|
Language translation | |
.icon-bubble8
|
Transcript | |
.icon-facebook-cream
|
Utility navigation social icon | |
.icon-facebook-magenta
|
Inline social icon | |
.icon-facebook-gray
|
Social conversation module | |
.icon-twitter-cream
|
Utility navigation social icon | |
.icon-twitter-magenta
|
Inline social icon | |
.icon-twitter-gray
|
Social conversation module | |
.icon-youtube-cream
|
Utility navigation social icon | |
.icon-mail-cream
|
Utility navigation social icon | |
.icon-linkedin-magenta
|
Profile social icon | |
.icon-google-plus-magenta
|
Profile social icon | |
.icon-forward
|
Share | |
.icon-rss
|
RSS feed | |
.icon-calendar-magenta
|
Add to calendar | |
.icon-menu-magenta
|
Small screens menu |