Icons

Icons are visual representations of commands, devices, directories, or common actions. We use CSS classes to customize icon color.

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

You can also download these icons.

  1. Go the California State Web Template Website Git Repo.
  2. Select Code > Download ZIP.
  3. In the file, go to src folder > images folder > icons folder (all the icons are in the icons folder).

Search icons

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

Search icons
    " "