Pharos
JSTOR's Design System
 Getting started Help FAQs DocumentationDevelopment GitHub JSTOR LogosTypographyColorImageryIconographyElevationVoice and toneJSTOR termsWeb elementsGrammar and styleEditing checklistAlertButtonBreadcrumbCheckboxCheckbox groupCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalMultiselect dropdownPaginationPillPopoverProgress barRadio buttonRadio groupSelectSheetSidenavSliderSwitchTableTabsToastTooltipText inputTextareaToggle button groupOverviewAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Icon
Pharos Icons are SVG visual representations of objects, items or content, or actions a user can take.
Example

See live code examples in Storybook
Usage When to use

Pharos icons seek to provide clarity and convey brand personality through color and style, but must first communicate meaning in the content.

Icons can be used inside links or buttons and also alone when space is limited, with a high amount of care and thought.

Use in product for the following:
  • CTA buttons or links, most specifically when paired with text
  • To symbolize tools (e.g., the viewer toolbar or project creator in Forum)
  • System actions (e.g., dropdown arrows, wayfinding, etc.)
  • Banners or alerts to bring attention to a specific message
  • Represent content types
  • Success and error states with text inputs for forms
Using with buttons or links

If the experience calls for it, buttons can be used with an icon to the left or the right of the text. Icons should be used consistently, e.g., if there is a row of buttons, all of them (or none of them) should include an icon

Links can also include an icon if needed. An example of this happens in the pagination component.

Using with inputs

Pharos text inputs and input groups can include icons. Icons need to be vertically centered within the input, which should automatically happen.

Formatting Sizing

Pharos icons are most typically 24px by 24px. This aligns with our base font size's line-height to make alignment smoother when icons are in use inline with text. A few icons are smaller at 16px by 16px. Do not resize the icons manually. If you need a different size, please contact the maintainers to discuss the need. Typically the answer will be to adjust the design or to go another route that obviates the need.

Color

Icons are always a solid color and need to pass the same color contrast ratio as typography (4.5:1). The color of the icon should reflect the importance of the icon's action.

The color can also signify different states to alert users. This occurs with toasts, alerts and error/success states for text inputs. We use icons so that color alone is not the only signal critical information to users in their workflow ( SC 1.4.1 ).

Spacing

When used in interactive components, like buttons, the spacing will follow the attributes set for the component. When icons are used next to text, there should be a minimum of 4px ($pharos-spacing-one-quarter-x) between the text and the icon.

Alignment

When icons are used next to text, they should be aligned to the center of the first (or only) line of text.

Contributing

Not finding an icon to support the design need? Please refer to the Iconography brand expressions to learn more about the principles and how to create an icon.

Best practices
Dos
  • Whenever possible, icons should be accompanied with text as this is more effective in communicating meaning than icons alone.
  • If an icon cannot have text paired next to it, the use of a tooltip will suffice (e.g., zoom in/zoom out on the viewer).
  • Icons can be used to draw attention and create visual hierarchy for a UI element
Don'ts
  • Using icons should never be for purely decorative reasons. Icons should provide or reinforce meaning to our users.
  • Icons should never be resized.
Content guidelines

For the text labels, they should relate to the content or action being represented. The labels should be concise and efficient.

Accessibility Relevant WCAG guidelines
  • 1.4.1 Use of Color A
  • 3.2.4 Consistent Identification AA
Importance

Icons provide users a visual representation of text or potential actions.

Code expectations
  • If the icon is purely decorative and is accompanied by text, the icon should have an aria-hidden="true" on the SVG to avoid being redundant.
  • If the icon is standalone without text, it should have a <title> element that gives it a name.
Expected actions
Screen reader
  • Reads the accompanying text if applicable

  • Reads the <title> element text if the icon is standalone

Keyboard
  • Icon with accompanying text should be in tab index
  • Standalone icon should also be in tab index