Overview
Icons usually appear as part of another component. Occasionally, you may need to present an icon on its own. The icon object includes a circular background for visual interest.
Usage
When to use
Icons are most effective when they support other elements. Consider using an icon to:
- Draw attention to a call to action. Combining an icon with text adds visual interest to that message.
- Help readers find key information. Use common icons to highlight details like phone numbers and email addresses.
When not to use
Avoid adding icons when:
- The icon's meaning is unclear. Icons should support other elements. An ambiguous icon can be confusing.
- Trying to compensate for a confusing page structure. If important information is difficult to find, an icon won't help.
Usability
- Provide text with the icon. Users will not always understand the meaning of icons alone.
- Be consistent. A single icon should have the same meaning throughout your web app or site. If a computer icon symbolizes a URL on one page, it shouldn't symbolize an email address on another page.
Accessibility
Hide decorative icons from screen readers. If the icon doesn't convey information or context, use the aria-hidden="true" attribute.
Related links
These Keystone Design System guidelines are related to this component.
-
Icon library We use Remix Icons on PA.gov and in the Keystone Design System. This library contains all available icons.
-
Icons Icons represent items and ideas in a simple graphic format. They help communicate with universal understanding.
-
Card A card provides information about linked resources in a structured format. Cards always appear as part of a group.