Pattern Library



The Seattle Times Icons are a webfont that allow you to include optimizied iconography in your project.


To use the Seattle Times icons in your project, there are three steps:

WARNING: $font-icon-path is relative from your compiled CSS directory.

On your pages or components, you can add the follow markup to display an icon:


Icons are symbols that may convey visual information. It is important to consider how an icon should be used in certain contexts, so that it makes sense for as many users as possible.

Decorative Icons

In cases when an icon is non-interactive and purely decorative, the aria-hidden attribute effectively removes the element from a screen readers aural rendering.

Non-interactive Icons

When an icon non-interactive itself but provides context for another interaction, use the aria-hidden attribute and then include an element that is visually hidden but provides context for screen readers.

This section is locked

Interactive Icons

When an icon is part of an interative element, use the aria-label on the interactive element to inform screen readers what it does and is used for.