Graphics

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

Use the canonical icon name when referencing the icons in code, however, “aliases” are provided in the table below to help you search this page for a particular icon.

The RTL (right-to-left) column designates whether an icon will flip on pages where the HTML element has its language set to an RTL-reading language, such as arabic.

icon icon-round canonical name aliases (for searchability only) RTL?
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 (for searchability only) RTL?
approved check, checkmark, success  
error delete, close, remove, multiply, multiplication, x  
warning alert, exclamation, exclamation-mark  
help question, question-mark
update    
updating spinner  
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 (for searchability only) RTL?
email envelope, envelope-back  
facebook    
flickr    
github    
linkedin    
pinterest    
twitter    
youtube    

Communications icons

icon icon-round canonical name aliases (for searchability only) RTL?
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 (for searchability only) RTL?
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 (for searchability only) RTL?
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 (for searchability only) RTL?
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 (for searchability only) RTL?
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  
lightbulb 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.

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 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" class="cf-icon-svg cf-icon-svg__download" viewBox="0 0 12 19"><path d="M11.16 16.153a.477.477 0 0 1-.476.475H1.316a.476.476 0 0 1-.475-.475V3.046a.476.476 0 0 1 .475-.475h6.95l2.893 2.893zm-1.11-9.925H8.059a.575.575 0 0 1-.574-.573V3.679H1.95v11.84h8.102zm-1.234 5.604L6.388 14.26a.554.554 0 0 1-.784 0l-2.428-2.428a.554.554 0 1 1 .783-.784l1.483 1.482V7.41a.554.554 0 1 1 1.108 0v5.12l1.482-1.482a.554.554 0 0 1 .784.783z"/></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