Icons

Icon resources for use in your projects, including USWDS icons and recommended external icon libraries.

USWDS icons

The U.S. Web Design System includes a set of 245+ icons designed for government websites. These icons are included with Civic and are located in /uswds/img/usa-icons/.

Sample icons

Here are some commonly used USWDS icons:

home

check

error

warning

info

settings

account_circle

mail

phone

edit

delete

file_download

file_upload

arrow_forward

arrow_back

Using USWDS icons

Include icons directly via the <img> tag:

<img src="/civic-guide/uswds/img/usa-icons/home.svg"
     alt="Home"
     style="width: 24px; height: 24px;">

Or use the USWDS sprite file for better performance when using multiple icons:

<svg class="usa-icon" aria-hidden="true" role="img">
  <use xlink:href="/civic-guide/uswds/img/sprite.svg#home"></use>
</svg>

View all USWDS icons on designsystem.digital.gov

Font Awesome

Font Awesome is one of the most popular icon libraries on the web, offering thousands of free and pro icons. USWDS recommends Font Awesome as a supplemental icon resource.

Free icons for any project

Font Awesome offers 2,000+ free icons in multiple styles (solid, regular, brands). The Pro version includes 26,000+ icons with additional styles and features.

Available as web fonts or SVGs
Consistent sizing and styling
Accessibility-friendly
Active community and updates

Visit Font Awesome

Using Font Awesome

Add the Font Awesome CDN to your HTML <head>:

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

Then use icons with the <i> element:

<!-- Solid style -->
<i class="fa-solid fa-house"></i>

<!-- Regular style -->
<i class="fa-regular fa-envelope"></i>

<!-- Brand icons -->
<i class="fa-brands fa-github"></i>

Google Material Icons

Google's Material Icons are part of the Material Design system, offering a comprehensive set of icons designed for clarity and simplicity.

Material Design icons

Over 2,500 icons in five styles: Outlined, Rounded, Sharp, Filled, and Two-tone. All icons are free and open source.

Multiple styles for each icon
Variable font support for customization
SVG and font formats available
Designed for digital interfaces

Visit Google Icons

Using Google Material Icons

Add the Material Icons font to your HTML <head>:

<link rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons">

Then use icons with the <span> element:

<span class="material-icons">home</span>
<span class="material-icons">search</span>
<span class="material-icons">settings</span>

For Material Symbols (newer variable font icons):

<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">

<span class="material-symbols-outlined">home</span>

Apple SF Symbols

Apple's SF Symbols is a comprehensive icon library designed for Apple platforms. While primarily intended for native iOS and macOS development, it's worth knowing about for teams building cross-platform experiences.

For native Apple development

SF Symbols provides 5,000+ symbols designed to integrate seamlessly with San Francisco, the system font for Apple platforms.

Designed for iOS, macOS, watchOS, and tvOS
Multiple weights and scales
Requires the SF Symbols app (macOS only)
Note: Not directly usable on the web

Learn about SF Symbols

Web development note: SF Symbols are designed for native app development and cannot be directly used on websites. For web projects, use USWDS icons, Font Awesome, or Google Material Icons instead.

Best practices

Accessibility

Always provide alternative text for meaningful icons using alt attributes or aria-label
Use aria-hidden="true" for decorative icons that don't convey meaning
Ensure sufficient color contrast between icons and backgrounds
Don't rely solely on icons to convey critical information—pair with text labels when possible

Sizing

Use consistent icon sizes throughout your interface (16px, 24px, 32px are common)
Match icon size to accompanying text size for visual balance
Ensure touch targets are at least 44x44 pixels for interactive icons on mobile

Consistency

Stick to one icon library per project when possible
Use the same icon style throughout (filled, outlined, etc.)
Maintain consistent stroke weights across all icons

Accessible icon example

<!-- Meaningful icon (needs alt text) -->
<button>
  <img src="/civic-guide/uswds/img/usa-icons/search.svg" alt="Search">
</button>

<!-- Decorative icon (hidden from assistive tech) -->
<a href="/home">
  <img src="/civic-guide/uswds/img/usa-icons/home.svg" alt="" aria-hidden="true">
  Home
</a>

<!-- SVG sprite with accessibility -->
<button aria-label="Close dialog">
  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
    <use xlink:href="/civic-guide/uswds/img/sprite.svg#close"></use>
  </svg>
</button>