Minicons
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.
Stylistic guidelines
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
| 16px | 20px | 25px | 30px | 40px |
|---|
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
| 14pt | 21pt | 28pt | 36pt | 48pt |
|---|
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.
One color
Negative space knocked out
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.
Asset LibraryView code
Navigation icons
left
right
up
down
arrow-left
arrow-right
arrow-up
arrow-down
Status icons
approved
error
help
delete
plus
minus
update
Social icons
youtube
flickr
plus
github
email-social
Communication icons
web
phone
technology
fax
Document icons
document
upload
copy
edit
attach
save
appendix
supplement
Financial product icons
bank-account
credit-card
loan
money-transfer
mortgage
debt-collection
credit-report
money
quick-cash
contract
comlaint
getting-credit-card
buying-car
paying-college
owning-home
debt
building-credit
prepaid-cards
payday-loan
retirement
Web icons
user
wifi
search
share
link
external-link
audio-mute
audio-low
audio-medium
audio-max
favorite
unfavorite
bookmark
unbookmark
settings
menu
lock
unlock
clock
chart
play
newspaper
microphone
bullhorn
double-quote
speech-bubble
information
lightbulb
dialogue
date
Download
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.
Vector files
Each of our minicons is available for download as a vector (.svg) on The Noun Project, a platform that collects and catalogs icons that are created and uploaded by graphic designers from around the world.