Iconography

Icons punctuate the JDRF visual style either by reinforcing key concepts or as a visual shorthand for tertiary actions, such as social sharing.

activity
alert-circle
align-center
align-justify
align-left
align-right
arrow-down
arrow-left
arrow-right
arrow-up
at-sign
bar-chart
bell-off
bell
bold
bookmark
calendar
camera
cash
check-circle
check-square
check
chevron-down
chevron-left
chevron-right
chevron-up
circle
clipboard
clock
contacts
copy
credit-card
crop
delete
dollar-sign
download
droplet
edit
external-link
eye-off
eye
facebook
file
filter
flag
heart
help-circle
home
image
info
instagram
italic
jdrf
link-2
linkedin
list-ordered
list
lock
log-in
log-out
mail
map-pin
menu
message-circle
minus
more-horizontal
more-vertical
move
phone
play-circle
plus
printer
rotate-ccw
rotate-cw
search
send
settings
share
tag
thumbs-down
thumbs-up
trash-2
twitter
user-plus
user
users-plus
users
x-circle
x
youtube

Using Icons in Code

Reference icons from the icon sprite file, spirit.svg, which loads and caches all Spirit icons in a single resource call. Use the following syntax:

<svg aria-label="Made With Love" class="spirit-icon" aria-hidden="false">
    <use xlink:href="/icons/spirit.svg#heart"></use>
</svg>

See parameters for color and size, below. See Accessibility guidelines.

Within the library, we maintain individual svg files for each icon, as well as a matching set for designers in Sketch.

Color

The color palette for icons is intentionally limited. Icons generally follow the guidelines for text, with matching colors for interactive, reverse, and disabled.

  • Use $spirit-icon-color-blue for directly interactive icons. Reverse to $spirit-icon-color-on-dark if the icon sits on JDRF blue or another dark color.
  • Use $spirit-icon-color-grey secondary UI icons where the icon supplements a larger control.
  • If an icon becomes disabled, use $spirit-disabled-color-foreground.

Color Tokens

Size

By default, scale icons within a component according to the standard sized below. Although we lack firm guidelines on sizing, follow these visual markers:

  • Smaller elements with text, such as buttons or inputs, use smaller 16px or 20px icons.
  • Spacious components, such as form feedback alerts, use larger 24px icons.
  • Meaningful icons used on their own, particularly in the icon-only button, use the largest 32px icon.

Optionally, place icons inline where they match the size and color of the text. This can result in icons that do not conform to the standard sizes below, but close alignment with the adjacent text is acceptable.

Size Tokens

Name Value

$spirit-size-icon-xs

16px

$spirit-size-icon-s

20px

$spirit-size-icon-m

24px

$spirit-size-icon-l

32px

Accessibility

label icons that lack a visible text label using `aria-label`. This is most common in icon buttons, where there is no textual cue to tell a screen reader user what the button does.
label icons that lack a visible text label using `aria-label`. This is most common in icon buttons, where there is no textual cue to tell a screen reader user what the button does.
use an `aria-label` for icons that already have a visible text label. Instead, use `aria-hidden=”true”` to hide them from screenreaders completely.
use an `aria-label` for icons that already have a visible text label. Instead, use `aria-hidden=”true”` to hide them from screenreaders completely.
apply `aria-hidden=”true”` to visual cues which are unnecessary for screenreader users, such as the down arrow in this select.
apply `aria-hidden=”true”` to visual cues which are unnecessary for screenreader users, such as the down arrow in this select.