Icons

Icons are visual representations of commands, devices, directories, or common actions. We use CSS classes to customize icon color for compatibility with all popular browsers.

How to use icons

Icon color and font can be styled using the same CSS rules used to style other text on a page. Keep in mind, color and font size will change the size of the icon.

To use an icon, insert an empty span tag with the corresponding class name. Here's an example: <span class="ca-gov-icon-info" aria-hidden="true"></span>

Do


  • Use icons with meaningful text labels
  • Use a single icon for a group of related content
  • Use a single icon per concept

Don't


  • Use icons without labels
  • Use too many icons and create visual clutter
  • Use multiple icon variations to represent the same concept

Search icons

Use the search to find a specific icon. You can also browse icons below.

Search icons
""