Prose v0

Icons & Cursors

Components

Icons

We recommended using external reference because it leverages browser cache well. Basically, all of the icons are in a single symbol file and you reference them by anchor.

Usage

  1. Download Symbol File (SVG)
  2. Place file in a public folder
  3. Reference the icons like this (replace {path-to-file} and {anchor}). Select an icon below to add that anchor to your clipboard:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img">
  <use href="/{path-to-file}/prs-icons.svg#{anchor}" />
</svg>

Arrow

Caret

Chevron

Collab

Content

Content-Edit

Content-Type

Data

Edit

Math-Sci

Media

Read-Write

Status

Table

Time

Uncategorized

Brand

Cursors

Coming soon...

Usage

Label

Icons should be labeled in the interface whenever possible. When space is at a premium, an icon can be labeled with a tooltip. The following icons are considered standards and do not need to be labeled on the interface or in a tooltip: search, close, menu (hamburger), and more (ellipses).

Icon Color

Icons should match the color of the text or state associated with that icon and will generally be dark gray #686868 (or white if on a dark background) unless it is paired with conformation text (green), warning text (red), or another color predetermined for the scenario the icon is in.

  • Do Use a red icon to help indicate an error state.

  • Do Use an aqua icon to match with the aqua text in the header.

  • Do Use a dark gray #686868 icon when paired with blackish #080808 text

  • Don't Use an icon color that is not related to the state or text.

Accessibility

For UI components and graphical elements, WCAG requires a contrast ratio of at least 3:1. If icons are used as interaction elements, for example in navigation, a contrast of 4.5:1 is recommended.