A list of links, each associated with its own icon (chosen from the enterprise icon library) to draw attention. Include links to internal pages and external pages.

Updates

09/16/21 - We updated the layout of Icon Lists to more consistently display across various viewports and placements, and with different contents.

Details

  • Linking: any internal or external link
  • Elements: title, description, Icon Links (each with their own icon, link text, and URL), card, and "more" link
  • Placement options: Landing Page, Program or Service page

When to use an Icon List

An Icon List is essentially a collection links with a visual styling that serves to draw attention and help users more quickly find the link they need. They also provide a decorative element that, when used appropriately, will leave visitors with a more positive impression.

Icon Lists should include links to fairly important content on the page. Icon Links will appear less important than Heroes, Calls to Action, and Tiles but more important than Link Collections.

Icon List Do's and Don'ts

  • Do use an Icon List for content that page visitors will understand with only a few words.
  • Don't use an Icon List for content that is extremely specific to the agency; for example, programs that can't be easily distinguished by name only.
  • Don't include the same icon more than once on the same page.
  • Don't use the same icon to represent different ideas in the same site
    • If on different pages, the same icon could link to different specific pages, as long as it always addresses the same overarching idea.
  • Do use icons to support the state brand personality attributes: pragmatic, inclusive, empowering, official, and charming.
    • Our icons use a generally friendly and positive style. Be wary of using icons with serious or solemn topics.

How to create an Icon List