Indigo Design System v1.2.0


Icons help users easily skim a page and digest information faster. The human brain recognizes images and symbols faster than words.


You can use this icon library to find the icon you need and use it in your product interface. It is designed to ensure consistency across all USAC products.

Don’t see an icon you need? Make a request.

download Download the Icon Library


Use this set of icons to explain specific actions that users can take on a page.

Icon Icon Name Description
add add
  • Allows users to add something to the page.
  • Example: to add another set of form fields like an address or phone number.
subtract subtract
  • Allows users to take something off the page (after they have added it).
  • Do not use by itself. Only use this subtract icon in conjunction with an add icon.
  • Example: to remove a form field, like an address or phone number, that they added but no longer need.
delete delete
  • Allows users to remove items from a page.
  • Example: to remove an attachment.
search search
  • Shows users where they can search for information on a page.
  • Only use this search icon within the Search component.
play play
  • Allows users to start a video.
  • Do not use alone. Only use this play icon as a part of the Video Playback component.
  • Example: the Schools and Libraries Online Learning Library.
save save
  • Allows users to save information on a page.
print print
  • Allows users to print information from a page.
share share
  • Allows users to share information on a page.
download download
  • Allows users to save information to their own device.
upload upload
  • Allows users to upload documents and other information.
edit edit
  • Allows users to edit specific information.
close close
  • Allows users to close a window or cancel an action.

Status & Help

Use this set of icons to alert users to important information or indicate status.

See Notifications component.

Icon Icon Name Description
help help
  • Indicates that there is more information that can help clarify a specific field or page.
success success
  • Indicates a successful status.
  • Example: if a user successfully corrects a data validation error or if they have completed a specific task.
warning warning
  • Indicates or warns users that something is wrong or they need to pay close attention.
information information
  • Indicates or notifies the user that there is new information.


Use this set of icons to show users that they are logged in to an application.

Icon Icon Name Description
home home
  • Allows users to find and return to their homepage or dashboard.
password password
  • Indicates that something is password protected.
  • Represents a password when logging in (used in conjunction with the word password).
user user
  • Represents a user or their profile.
  • Represents a username when logging in (used in conjunction with the word username).


Use this set of icons to represent different ways of contacting USAC.

Icon Icon Name Description
chat chat
  • Indicates that users can start a live chat experience.
phone phone
  • Indicates that users can call USAC.
  • Note: usually used in conjunction with a phone number.
email email
  • Indicates that users can send an email to USAC.
  • Note: usually used in conjunction with an email address.
snail-mail snail-mail
  • Indicates that users can send mail to USAC.
  • Note: usually used in conjunction with a mailing address.


Use this set of icons to identify or call out a specific type of information.

Icon Icon Name Description
external-link external-link
  • Indicates that a link will take users to a page outside of, in a new tab.
  • Note: Position the external link icon after the link text.
    External Link external-link
folder folder
  • Indicates that a set of items is grouped together.
location location
  • Shows a specific point on a map.
  • Represents a specific location.
  • Note: usually used in conjunction with an address, parts of an address, or a map.
calendar calendar
  • Represents a calendar or a specific date.
  • Allows users to pick a date.
video video
  • Represents a video.


Use this set of icons to set user expectations around what types of files they are about to download or allowed to upload.

Icon Icon Name Description
file-xls file-xls
  • Represents an Excel spreadsheet.
file-pdf file-pdf
  • Represents a PDF.
file-ppt file-ppt
  • Represents a PowerPoint presentation.
file-doc file-doc
  • Represents a Word document.
file-csv file-csv
  • Represents a CSV document.

Dos and Don’ts

success Do
  • Do use icons next to words to help enhance their meaning.

    External Link external-link

  • Do use icons to differentiate information.
    Specifically, use in alerts or warnings to notify users that a specific message is important to pay attention to and is different than pieces of content.

    information This is an important example!

    success This is a successful example!

warning Don't
  • Don’t use icons that are not in this library or create new icons.
    If you need an icon that is not part of this library, make a request.
  • Don’t use too many icons on one page.
    Icons help to differentiate a piece of information from another on a page or to draw a user’s eye to something they need to see. However, icons also work a lot like highlighting in a book while taking notes. If you highlight the whole page, nothing is highlighted.

Visual Style

Indigo’s icons share qualities that ensure USAC speaks the same visual language across all of our applications.


Indigo’s icons are designed with minimal detail so that they consistently convey the same information no matter their size. However, to keep a consistent language across USAC’s many platforms, they should be used at consistent sizes.

By default, icons should be 20px. If you need to use an icon at another size, do not use icons smaller than 18px or larger than 50px. If you need to use an icon outside of this pixel range, talk to the Stakeholder Engagement team.

email email email email email
search search search search search
18px 20px 24px 32px 48px
indi-icon--xsmall indi-icon--small indi-icon--medium indi-icon--large indi-icon--xlarge


Indigo’s icons are built with 1px lines. From a design perspective, these lines are expanded so the 1px weight is conveyed no matter the icon’s final size. This allows the icons to keep their airy feel across a variety of uses.

Indigo’s icons are built with 1px lines.

Borders and End Points

Indigo’s icons have rounded end points and corners. This softens the icons feel and helps the brand’s overall goal of being inviting and accessible.

Indigo’s icons are built with 1px lines.


  • Wherever possible, use icons in conjunction with the action or noun it is helping to represent (e.g., save Save). This will help ensure that all users understand the meaning of the icon.
  • Make sure to provide a <title> tag within the <svg> element, and include an aria-labelledby="title" attribute on the <svg> element itself to point to the <title> tag.
<svg class="indi-icon" aria-labelledby="title">
    <use xlink:href="/assets/icons/indi_icons.svg#print">


Icons are combined into one single SVG sprite file. Reference icons by name after the hash # in the <use> URL.

<svg class="indi-icon" aria-labelledby="title">
    <use xlink:href="/assets/icons/indi_icons.svg#file-xls">

Vertically Align

In order to vertically align icons to the middle of text add the indi-icon--valign-middle modifier class.

file-xls Excel File

<svg class="indi-icon indi-icon--valign-middle" aria-labelledby="title">
    <use xlink:href="/assets/icons/indi_icons.svg#file-xls">
</svg> Excel File

IE Support

IE browsers lower than Edge 13 do not have native SVG sprite support. To support these browsers add the svg4everybody external-link library to your project.