Icons - USAC | Indigo Design System v1.2.0

Overview

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 the Icon Library

Actions

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

Icon	Icon Name	Description
	`add`	Allows users to add something to the page. Example: to add another set of form fields like an address or phone number.
	`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`	Allows users to remove items from a page. Example: to remove an attachment.
	`search`	Shows users where they can search for information on a page. Only use this search icon within the Search component.
	`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`	Allows users to save information on a page.
	`print`	Allows users to print information from a page.
	`share`	Allows users to share information on a page.
	`download`	Allows users to save information to their own device.
	`upload`	Allows users to upload documents and other information.
	`edit`	Allows users to edit specific information.
	`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`	Indicates that there is more information that can help clarify a specific field or page.
	`success`	Indicates a successful status. Example: if a user successfully corrects a data validation error or if they have completed a specific task.
	`warning`	Indicates or warns users that something is wrong or they need to pay close attention.
	`information`	Indicates or notifies the user that there is new information.

Navigation

Use this set of icons to indicate navigation around a page.

Icon	Icon Name	Description
	`navigation-menu`	Only use for mobile screens. Use to replace the main navigation.
	`caret-left`	Use to send users back to the last page they were on.
	`caret-right`	Use to send users forward to the next or a specific page.
	`caret-up`	Use to sort data in columns in a descending order. Use to close an expandable element.
	`caret-down`	Use to sort data in columns in an ascending order. Use to open an expandable element.

Account

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

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

Contact

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

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

Identifying

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

Icon	Icon Name	Description
	`external-link`	Indicates that a link will take users to a page outside of USAC.org, in a new tab. Note: Position the external link icon after the link text. External Link
	`folder`	Indicates that a set of items is grouped together.
	`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`	Represents a calendar or a specific date. Allows users to pick a date.
	`video`	Represents a video.

Documents

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`	Represents an Excel spreadsheet.
	`file-pdf`	Represents a PDF.
	`file-ppt`	Represents a PowerPoint presentation.
	`file-doc`	Represents a Word document.
	`file-csv`	Represents a CSV document.

Dos and Don’ts

Do

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

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.

This is an important example!

This is a successful example!

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.

Size

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.

XS	S	M	L	XL


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

Weight

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.

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.

Accessibility

Wherever possible, use icons in conjunction with the action or noun it is helping to represent (e.g., 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.

html

Copy to Clipboard

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

Use

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

html

Copy to Clipboard

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

Vertically Align

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

Excel File

html

Copy to Clipboard

<svg class="indi-icon indi-icon--valign-middle" aria-labelledby="title">
    <title>file-xls</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 library to your project.