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.