Icons

Icons help users quickly skim a page and digest information, as the human brain recognizes images and symbols faster than words. They also save space, aid content comprehension, and enhance visual appeal.

Overview

Use this icon library to find and incorporate the icons you need in your product interface, ensuring consistency across all USAC products. If you don't see the icon you need, request a new one.

Add

Alert

Arrow Left

Arrow Right

Ascending

Bar Graph

Bell

Bell Alerts

Bookmark

Calendar

Caret Down

Caret Left

Caret Right

Caret Up

Cellphone

Cellphone Old

Chat

Check

Checkmark

Clock

Database

Delete

Descending

Download

Edit

Error

Extended Filter

External Link

File CSV

File DOC

File GIF

File JPG

File PDF

File PNG

File PPT

File SHP

File XLS

File XML

File ZIP

Filter

Folder

Help

Hide

History

Home

Information

Laptop

Lasso

Layer List

Legend

Line

Location

Map Globe

Map Zoom To Area

Measure Line

Move Expand Vertical

Move Shrink Vertical

Navigation Menu

Password

Phone

Pin Tear

Play

Polygon

Pop Up

Report

Reset

Revert

Save

Settings

Show

Signal Tower

Snail Mail

Sort

Subtract

Success

Table

Upload

User

Video

Warning

Wifi

Wrench

Zoom

Actions

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

Example	Vue Component	Description
	`IconAdd`	Allows users to add something to the page Example: adding another set of form fields like an address or phone number
	`IconSubtract`	Allows users to take something off the page (after they have added it). Use only in conjunction with an add icon. Example: removing an added form field, like an address or phone number, that is no longer needed
	`IconDelete`	Allows users to remove items from a page. Example: removing an attachment
	`IconSearch`	Shows users where they can search for information on a page. Only use this search icon within the Search component
	`IconPlay`	Allows users to start a video. Use only as part of the Video Playback component. Example: playing videos or webinar recordings and E-rate Program Online Learning
	`IconSave`	Allows users to save information on a page
	`IconCheck`	Represents a completed task or positive confirmation
	`IconWrench`	Symbolizes settings, tools, or maintenance options
	`IconRevert`	Indicates undoing a previous action or returning to a prior state
	`IconPrint`	Allows users to print information from a page
	`IconShare`	Allows users to share information on a page
	`IconDownload`	Allows users to download files to their own device
	`IconUpload`	Allows users to upload files
	`IconEdit`	Allows users to edit specific information
	`IconClose`	Allows users to close a window or cancel an action
	`IconSort`	Allows users to sort a column in ascending order; symbol is inverted for descending order
	`IconShow`	Allows users to make content visible
	`IconHide`	Allows users to make hide content

Status & Help

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

Example	Vue Component	Description
	`IconHelp`	Indicates additional information available to clarify a specific field or page
	`IconSuccess`	Indicates a successful status Example: user successfully corrects a data validation error or completes a specific task
	`IconWarning`	Indicates an issue or warns users to pay close attention
	`IconInformation`	Indicates new information for the user
	`IconClock`	Represents time-related actions or statuses, such as scheduling or deadlines
	`IconAlert`	Draws attention to important information or warnings
	`IconError`	Indicates an error or issue that needs attention
	`IconHistory`	Signifies previous activities or logs of actions taken
	`IconCheckmark`	Indicates a checked status exclusively in the checkbox component Avoid using this icon in other contexts; use IconSuccess instead
	`IconBell`	Indicates general notifications and alerts
	`IconBellAlerts`	Highlights urgent or important notifications that require immediate attention from the user

Use the following set of icons to indicate navigation around or between pages.

Example	Vue Component	Description
	`IconNavigationMenu`	Only use for mobile screens to replace the main navigation
	`IconCaretLeft`	Navigates users back to the previous page
	`IconCaretRight`	Navigates users to the next page or a specific page
	`IconCaretUp`	Sorts data in columns in descending order Use to collapse an expandable element
	`IconCaretDown`	Sorts data in columns in ascending order. Use to open an expandable element
	`IconArrowRight`	Navigates the user forward to the next item or screen
	`IconArrowLeft`	Navigates the user backward to the previous item or screen
	`IconDescending`	Indicates sorting items in decreasing order
	`IconAscending`	Indicates sorting items in increasing order

Account

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

Example	Vue Component	Description
	`IconHome`	Returns users to their homepage or dashboard
	`IconPassword`	Indicates that something is password protected. Represents a password when logging in (used in conjunction with the word "password")
	`IconUser`	Represents a user or their profile. Represents a username field when logging in (used in conjunction with the word "username")

Contact

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

Example	Vue Component	Description
	`IconChat`	Indicates that users can engage in a live conversation
	`IconPhone`	Indicates that users can call USAC. Typically used in conjunction with a phone number
	`IconEmail`	Indicates that users can send an email to USAC. Typically used in conjunction with an email address
	`IconSnailMail`	Indicates that users can send mail to USAC. Typically used in conjunction with a mailing address
	`IconCellphoneOld`	Represents a traditional mobile phone, indicating contact via older mobile technology
	`IconCellphone`	Represents a smart mobile phone, indicating contact via contemporary mobile technology
	`IconLaptop`	Symbolizes computer-based communication or activities
	`IconSignalTower`	Indicates a mobile network or communication signal
	`IconWifi`	Represents wireless internet connectivity

Identifying

Use the following set of icons to identify or highlight specific information.

Example	Vue Component	Description
	`IconExternalLink`	Indicates a link that will open a page outside of USAC.org in a new tab Position the external link icon after the link text. See Dos and Don’ts section below for a visual example
	`IconFolder`	Indicates that a set of items is grouped together
	`IconLocation`	Indicates a specific point on a map. Represents a specific location. Typically used in conjunction with an address, parts of an address, or a map
	`IconCalendar`	Signals to users that there is a date-related function, such as selecting a date or viewing a calendar
	`IconVideo`	Indicates video content Signals to users that a video is available for viewing

Documents

Use the following set of icons to inform users about the types of files they can download or upload.

Example	Vue Component	Description
	`IconFileCSV`	Represents a CSV document
	`IconFileDOC`	Represents a Word document
	`IconFileGIF`	Represents a GIF
	`IconFileJPG`	Represents a JPG image
	`IconFilePPT`	Represents a PowerPoint presentation
	`IconFileXLS`	Represents an Excel spreadsheet
	`IconFilePNG`	Represents a PNG format image
	`IconFileSHP`	Represents the ability for a user to upload or download a shapefile
	`IconFilePDF`	Represents a PDF file
	`IconFileXML`	Represents an extensible markup language file
	`IconFileZIP`	Represents a ZIP file

Map Icons

Use the following set of icons to make map-based information more intuitive and accessible.

Example	Vue Component	Description
	`IconBarGraph`	Represents a toggle to display statistics or graphs tools
	`IconMapGlobe`	Represents satellite mode
	`IconBookmark`	Signals that users can bookmark a map extent
	`IconDatabase`	Represents a toggle to display the interface used for downloading/uploading data from a database or indicates that users can save data from a user interface to a database
	`IconExtendedFilter`	Signals that users can filter map features by map extent
	`IconFilter`	Represents a toggle to display the filter tool that allows users to filter a data layer
	`IconSettings`	Represents a toggle to display the settings/configuration tool that allows users to select settings
	`IconLasso`	Represents a toggle to display the lasso tool that allows users to select features based on freehand drawing
	`IconLayerList`	Represents a toggle to display a list containing all GIS layers in a map
	`IconLegend`	Represents a toggle to display the legend in a map
	`IconLine`	Represents a toggle to display the line tool that allows users to draw a line or access related functions
	`IconPinTear`	Represents a toggle to display the point tool that allows users to draw a point or access related functions
	`IconMeasureLine`	Represents a toggle to display the measure tool that allows users to measure linear distance
	`IconPolygon`	Represents a toggle to display the polygon tool that allows users to draw a polygon or access related functions
	`IconPopUp`	Represents an option to turn pop-ups on or off
	`IconReport`	Signals that users can upload or download a report
	`IconReset`	Signals that users can reset options to a default state
	`IconTable`	Represents a toggle to display a table
	`IconMapZoomToArea`	Signals that users can zoom to an area drawn on a map
	`IconMoveExpandVertical`	Allows users to vertically expand or move elements within a user interface
	`IconMoveShrinkVertical`	Allows users to vertically shrink or move elements within a user interface
	`IconZoom`	Allows users to change the magnification level of content displayed on a screen

Visual Style

Indigo Design System icons share a similar minimalist appearance, ensuring a uniform visual language across all USAC applications.

Size

Maintain a unified visual style across USAC’s various platforms by using consistent icon sizing.

Whenever possible, use icons within Indigo components, as they feature predefined sizing and spacing for proper alignment.

Dos and Don’ts

Do use icons next to words to help enhance their meaning.
Do use icons to differentiate between various types of information.
Do use icons in alerts or warnings to signal the importance of specific messages, distinguishing them from regular content.

Don't

Don’t use icons that are not in this library or create new icons; if needed, request a new icon.
Don’t use too many icons on one page. Icons help to distinguish information or capture attention, like highlighting in a book; overusing them can diminish their impact, like highlighting an entire page.

Accessibility

Wherever possible, pair an icon with the action or noun it represents (e.g., use IconSave to indicate users can save information on a page). This approach helps users understand the icon’s meaning.
Use the iconName prop in the Vue component to provide an accessible title in the rendered component.
If the iconName is populated and ariaHidden is set to false, the default role="presentation" automatically changes to role="img".
When using HTML, ensure screen readers detect icons by adding a <title> tag to the <svg> element, and including an aria-labelledby="title" attribute that references the <title> tag. Set role="img" appropriately.
If you need to hide an icon from screen readers when using HTML, set role="presentation".

Use

In Vue, each icon has its own Vue component. Reference icons by using the corresponding Vue component.

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

Vertically Align

In Vue, use the valign prop to vertically align icons to the middle of text.

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

IE Support

IE browsers older than Edge 13 lack native SVG sprite support. To support these browsers add the svg4everybody library to your project.

Installation

Props

No records available