Minicons are small-scale icons that visually reinforce an interface action, file type, status, or category.

Minicons are visually simple, quickly recognizable, and easy to understand. They are almost always used in context with descriptive text and function to reinforce the message of that text.

Scaling

Web scale

The following primary benchmark sizes should be used for web sizing:

• 16px: inline with text
• 20px: on buttons
• 25px: social media sharing sets
• 30px: inline with large text links
• 40px: paired with primary headers

Print scale

The following primary benchmark sizes should be used for print sizing:

• 14pt: inline with text
• 21pt: numbers, contact icons
• 28pt: numbers, contact icons
• 36pt: numbers, contact icons
• 48pt: paired with primary headers

Color

Minicons should always be one color. If used over a color field, negative space should be knocked out.

Although color usage is flexible, minicons should always be used in high contrast tones relative to the background to maximize legibility.

Spacing

Padding varies around minicons of various primary shapes. Square, vertically and horizontally rectangular, diagonal, and most complex minicons can fit within the relative padding bounding box. Circular and some complex icons should be slightly larger to offset the visual weight of surrounding negative space.

Animation

In certain instances, minicons can be animated to aid communication or to reassure the user that an action is functioning as intended. Examples include saving or loading content. Depending on the context, the animated minicon follows the standards of the component that contains it, for example, the minicon follows the size and padding standards for buttons when placed inside a button to indicate loading or follows standards of a form-level alert within an alert message.

Minicon font

Our full minicon set is available for desktop use as an icon font (.ttf). It can be accessed through programs like Illustrator and InDesign via the glyph panel.

Download .ttf