Minicons
Example
HTML code
Jinja2 template code for Wagtail CMS
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.
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.
Update
Asset Library View code
Navigation icons
| icon | icon-round | canonical name | aliases |
|---|---|---|---|
| up | chevron-up | ||
| right | chevron-right | ||
| down | chevron-down | ||
| left | chevron-left | ||
| arrow-up | |||
| arrow-right | |||
| arrow-down | |||
| arrow-left |
Status icons
| icon | icon-round | canonical name | aliases |
|---|---|---|---|
| approved | check, checkmark, success | ||
| error | delete, close, remove, multiply, multiplication, x | ||
| warning | alert, exclamation-mark | ||
| help | question, question-mark | ||
| update | updating (used for animated state) | ||
| dollar | |||
| plus | add, addition, expand | ||
| minus | subtract, subtraction, collapse | ||
| divide | division | ||
| equal | equals | ||
| percentage | percent |
Social/sharing icons
| icon | icon-square | canonical name | aliases |
|---|---|---|---|
| envaelope, envelope-back | |||
| flickr | |||
| github | |||
| youtube |
Communications icons
| icon | icon-round | canonical name | aliases |
|---|---|---|---|
| envelope-back | |||
| fax | fax-machine | ||
| envelope-front | |||
| phone | telephone, handset | ||
| technology | cellphone, tablet | ||
| web | globe, world |
Document icons
| icon | icon-round | canonical name | aliases |
|---|---|---|---|
| appendix | |||
| paper-clip | attach, attachment | ||
| copy | duplicate | ||
| document | doc, pdf | ||
| download | |||
| upload | |||
| edit | pencil | ||
| printer | |||
| rss | feed | ||
| save | disk | ||
| supplement |
Financial products, services, and concepts
| icon | icon-round | canonical name | aliases |
|---|---|---|---|
| bank | bank-account | ||
| building-credit | |||
| car | car-loan, auto, auto-loan | ||
| complaint | |||
| fountain-pen | contract | ||
| credit-card | |||
| credit-report | |||
| debt-collection | |||
| debt | |||
| getting-a-credit-card | credit-card-contract | ||
| loan | |||
| money | dollar-bill | ||
| money-transfer | |||
| mortgage | sold | ||
| house | buying-a-house, owning-a-home, home | ||
| payday-loan | |||
| college | paying-for-college, grad-cap, mortarboard | ||
| prepaid-cards | prepaid | ||
| quick-cash | |||
| piggy-bank | retirement |
Web application icons
| icon | icon-round | canonical name | aliases |
|---|---|---|---|
| audio-max | audio-high | ||
| audio-medium | |||
| audio-low | |||
| audio-mute | mute, audio-off | ||
| bookmark | |||
| unbookmark | |||
| broadcast | antenna, radio | ||
| bullhorn | megaphone | ||
| chart | graph | ||
| clock | time | ||
| date | calendar | ||
| dialogue | discussion | ||
| disabled | no, disallowed | ||
| external-link | |||
| favorite | star, starred, fav, fave | ||
| unfavorite | unstar, unstarred, unfav, unfave | ||
| information | info, i | ||
| lightbulb | idea | ||
| link | |||
| list | |||
| lock | locked | ||
| unlock | unlocked | ||
| menu | hamburger | ||
| microphone | mic | ||
| newspaper | news | ||
| parent | family | ||
| play | |||
| open-quote | |||
| close-quote | |||
| search | zoom, magnifying-glass | ||
| settings | preferences, gear, cog | ||
| share | |||
| speech-bubble | |||
| user | person | ||
| wifi | wi-fi, wireless |
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.