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.

CFPB Minicons

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

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

One color minicon example

Negative space knocked out

Negative space knocked out minicon example

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.

Minicon spacing diagram

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

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
email envaelope, envelope-back
facebook  
flickr  
github  
linkedin  
twitter  
youtube  

Communications icons

icon icon-round canonical name aliases
email envelope-back
fax fax-machine
mail 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
print 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.

Download .ttf

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.

View on Noun Project