Iconography

Icons visually reinforce an interface action, file type, status, or category. They 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.

Download the icon font

Our full icon set is available for desktop use as an icon font in OpenType format. It can be accessed through programs like Adobe Illustrator and Adobe InDesign via the Glyphs panel. This should not be used for placing icons on a website.

Download font

Download vector files

Each of our icons is available for download in SVG form 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

Icon library

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  
left-right horizontal
up-down vertical

Status icons

icon icon-round canonical name aliases
approved check, checkmark, success
error delete, close, remove, multiply, multiplication, x
warning alert, exclamation, exclamation-mark
help question, question-mark
update spinner, updating (used for animated state)
power on-off
dollar dollar-sign, cost
plus add, addition, expand, show
minus subtract, subtraction, collapse, hide
divide division
equal equals
percentage percent

Social/sharing icons

icon icon-square canonical name aliases
email envelope, envelope-back
facebook  
flickr  
github  
linkedin  
pinterest  
twitter  
youtube  

Communications icons

icon icon-round canonical name aliases
email envelope-back
fax fax-machine
mail envelope-front
phone telephone, handset
photo photography, camera
presentation screen
technology cellphone, tablet
video movie, camcorder
web globe, world

Document icons

icon icon-round canonical name aliases
appendix  
book  
copy duplicate
document doc, pdf, page
download document-down
upload document-up
edit pencil, write
folder  
folder-add folder-plus
folder-delete folder-remove, folder-x
folder-empty  
folder-save folder-check
paper-clip attach, attachment
print printer
rss feed
save disk, floppy-disk
supplement add-document, add-page

Financial products, services, and concepts

icon icon-round canonical name aliases
activity clipboard
bank bank-account
building-credit  
calculate calculator
car car-loan, auto, auto-loan
college paying-for-college, grad-cap, mortarboard
complaint  
credit-card  
credit-payment credit-card-payment
credit-repair  
credit-report document-check
debt-collection  
debt  
foreclosure  
fountain-pen contract
getting-a-credit-card credit-card-contract
health-insurance medical
house buying-a-house, owning-a-home, home
insurance  
loan  
money dollar-bill, currency
money-transfer  
mortgage  
payday-loan  
prepaid-cards prepaid-card, prepaid
quick-cash  
piggy-bank retirement, saving, savings
piggy-bank-check  
servicemembers dog-tags
sold  
split  
toolbox  

Expense icons

icon icon-round canonical name aliases
briefcase  
bus public-transit
cart groceries, shopping, shopping-cart
childcare baby-bottle
clothes shirt
court gavel
dine-out dining-out, pizza, pizza-slice, food
disability wheelchair
entertainment ticket
equipment hammer, tools
fall autumn, leaf
flower garden
furniture chair, sofa
gambling  
gift present, package
healthcare doctor
monitor  
pet pets
price-tag  
spring  
summer sun
taxes government
travel airplane, flight
winter snow, snowflake

Web application icons

icon icon-round canonical name aliases
agreement handshake
audio-max audio-high
audio-medium  
audio-low  
audio-mute mute, audio-off
bookmark  
unbookmark  
broadcast antenna, radio
bullhorn megaphone
chart graph
clock time
compass  
date calendar
dialogue dialog, chat, discussion
disabled no, disallowed
external-link  
favorite star, starred, fav, fave
unfavorite unstar, unstarred, unfav, unfave
filter sliders, controls
flag  
history  
information info, i
light-bulb idea
link  
list  
lock locked, padlock
unlock unlocked
map location
menu hamburger
microphone mic
newspaper news
open-quote  
close-quote double-quote
parent family
play  
policy law
pop-up new-window
regulation rule, justice
search zoom, magnifying-glass
serve hand, raise-hand
settings preferences, gear, cog
share  
share-alt  
speech-bubble chat-bubble
thought-bubble thinking, thoughts
user person
wifi wi-fi, wireless, signal

Implementation details

Each icon has a circled variant shown in the second column (or square, in the case of the social media icons) that can be accessed by appending -round (or -square) to the canonical name or any of its aliases.

Animated icon

In certain instances, icons can be animated to aid communication or to reassure the user that an action is functioning as intended. Examples include saving or loading content.

HTML code snippet

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 19" class="cf-icon-svg cf-icon-svg__updating"><path d="M5.857 3.882v3.341a1.03 1.03 0 0 1-2.058 0v-.97a5.401 5.401 0 0 0-1.032 2.27 1.03 1.03 0 1 1-2.02-.395A7.462 7.462 0 0 1 2.235 4.91h-.748a1.03 1.03 0 1 1 0-2.058h3.34a1.03 1.03 0 0 1 1.03 1.03zm-3.25 9.237a1.028 1.028 0 0 1-1.358-.523 7.497 7.497 0 0 1-.37-1.036 1.03 1.03 0 1 1 1.983-.55 5.474 5.474 0 0 0 .269.751 1.029 1.029 0 0 1-.524 1.358zm2.905 2.439a1.028 1.028 0 0 1-1.42.322 7.522 7.522 0 0 1-.885-.652 1.03 1.03 0 0 1 1.34-1.563 5.435 5.435 0 0 0 .643.473 1.03 1.03 0 0 1 .322 1.42zm3.68.438a1.03 1.03 0 0 1-1.014 1.044h-.106a7.488 7.488 0 0 1-.811-.044 1.03 1.03 0 0 1 .224-2.046 5.41 5.41 0 0 0 .664.031h.014a1.03 1.03 0 0 1 1.03 1.015zm.034-12.847a1.03 1.03 0 0 1-1.029 1.01h-.033a1.03 1.03 0 0 1 .017-2.06h.017l.019.001A1.03 1.03 0 0 1 9.226 3.15zm3.236 11.25a1.029 1.029 0 0 1-.3 1.425 7.477 7.477 0 0 1-.797.453 1.03 1.03 0 1 1-.905-1.849 5.479 5.479 0 0 0 .578-.328 1.03 1.03 0 0 1 1.424.3zM10.475 3.504a1.029 1.029 0 0 1 1.41-.359l.018.011a1.03 1.03 0 1 1-1.06 1.764l-.01-.006a1.029 1.029 0 0 1-.358-1.41zm4.26 9.445c-.096.19-.203.379-.315.56a1.03 1.03 0 1 1-1.749-1.086c.082-.13.158-.267.228-.405a1.03 1.03 0 1 1 1.836.93zm-1.959-6.052a1.03 1.03 0 0 1 1.79-1.016l.008.013a1.03 1.03 0 1 1-1.79 1.017zm2.764 2.487a9.327 9.327 0 0 1 0 .366 1.03 1.03 0 0 1-1.029 1.005h-.025A1.03 1.03 0 0 1 13.482 9.7a4.625 4.625 0 0 0 0-.266 1.03 1.03 0 0 1 1.003-1.055h.026a1.03 1.03 0 0 1 1.029 1.004z"/></svg>

Implementation details

Our previous font icon system provided modifiers to rotate any icon. We found in reality this wasn’t practical and only one icon is ever animated, update. We’ve provided an alias–updating–to be used within the UI when a user needs to be made aware that the website is working on responding to their actions.

Specs

Depending on the context, the animated icon follows the standards of the component that contains it, for example, the icon 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 a notification.

Icon with text

Extra small

  • Web: 16px size, used inline with text
  • Print: 14pt size, used inline with text

HTML code snippet

<a class="a-link a-link__icon" href="#">
    <span class="a-link_text">Example with icon</span>
    {% include icons/download.svg %}
</a>


<!-- Raw SVG

<a class="a-link a-link__icon" href="#">
    <span class="a-link_text">Example with icon</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 651.7 1200" class="cf-icon-svg"><path d="M507.1 692.8c-15.6-15.6-40.9-15.6-56.6 0l-85.1 85.1V466.6c0-22.1-17.9-40-40-40s-40 17.9-40 40V778l-85.1-85.1c-15.6-15.6-40.9-15.6-56.6 0-15.6 15.6-15.6 40.9 0 56.6L297 902.9c7.5 7.5 17.7 11.7 28.3 11.7s20.8-4.2 28.3-11.7l153.3-153.4c15.8-15.7 15.8-41 .2-56.7z"/><path d="M30 161c-16.5 0-30 13.5-30 30v827.8c0 16.5 13.5 30 30 30h591.7c16.5 0 30-13.5 30-30V343.7L469 161H30zm389.6 60v134.8c0 19.9 16.3 36.2 36.2 36.2h135.9V988.8H60V221h359.6z"/></svg>
</a>
-->

Implementation details

The standard icon height in ems matches the 19px rendered canvas of text set in Avenir Next sized at 16px (19/16 = 1.1875).

@cf-icon-height: 1.1875em;

Small

  • Web: 20px size, used on buttons
  • Print: 21pt size, used for numbers and contact icons

Medium

  • Web: 25px size, used in social media sharing sets
  • Print: 28pt size, used for numbers and contact icons

Large

  • Web: 30px size, used inline with large text links
  • Print: 36pt size, used for numbers and contact icons

Extra large

  • Web: 40px size, paired with primary headings
  • Print: 48pt size, paired with primary headings