Patterns

Icons

Icons symbolize common actions, features, and themes throughout our app.

Icons should be used sparingly, with intentional purpose and meaning, and be paired with text for clarity. Icons can function contextually as both interactive and static elements.

Find iconsCopy URL

You can discover currently available icons on their respective platforms:

  • Racine (Sprout web app) đź”’
  • Sketch library đź”’
  • Font Awesome - Font Awesome is a library of nearly 3,000 icons designed by a team of professional iconographers. If our icon library doesn’t have what you need, you can add an icon from Font Awesome.

Adding an iconCopy URL

Get started by finding the new icon on Font Awesome’s website. One identified, download the library and locate the corresponding source SVG file in svgs > solid folder of the library. If you have difficulty with this step, reach out to a member of the design systems or product design teams. Sprout also maintains licenses for Font Awesome Pro, details and credentials can be found here. Proprietary or custom icons need to be created in certain cases. Please reach out to product design with questions about creating or obtaining custom icons. Once an icon SVG has been obtained, developers can make a Pull Request to either racine or bloom-dearborn. After the pull request has been merged, developers will need to bump the Racine or Dearborn version used in their project to use the icon.

Guidelines for engineers

  • The source SVG icon file should not contain any fill colors unless it is a branded icon.
  • New icons should be placed in the icons folder of your local copy of the Racine repo.
  • SVG files should not be minified or otherwise optimized before they are added to the library in GitHub — the SVG Sprite tools used by Racine and Dearborn handle optimization automatically.

Sprout designers

  • Exporting Font Awesome SVG files from design software can cause unintended side effects. Please provide developers with the source SVG file from Font Awesome’s library when possible.
  • Refer to this guide for details and instructions on adding a new or custom icon.

Bambu designers

Adding additional icons should refer to this README file.

Using iconsCopy URL

Seeds icons can be consumed in code through our React based Racine and Dearborn Icon components, downloaded directly on GitHub or pulled in from our Sketch library.

InteractivityCopy URL

Basic states

Off states

In the Sprout paradigm, an “off” state occurs before an action has been taken on an icon.

DefaultOff: — 4.49:1
HoverOff: — 10.56:1
ActiveOff: — 16.65:1
FocusDefault browser focus on 32x32 hit box (desktop).

The off state of inline icon actions

On states

In contrast to the “off” state, an “on” state occurs after an action has been taken. It can represent a simple binary action or that data has been changed in some way.

DefaultOff: — 4.58:1
HoverOff: — 7.75:1
ActiveOff: — 11.88:1
FocusDefault browser focus on 32x32 hit box (desktop).

The on states of inline action icons

Symbolic icon education

Tooltips provide new and existing users with text labeling to aid in immediately understanding the meaning of an icon. As Sprout uses primarily symbolic iconography to create conventions, Sprout users are never left guessing the meaning or state of an icon because they, or their computer, can read it.

Meaning

Tooltip displays what the icon means and what it will do when clicked.

Hover reveals the meaning of an icon
Hover reveals the meaning of an icon

State

Tooltip is reflective of the state of the icon. I.E. “Like” vs “Unlike”

Hover reveals the state of an icon
Hover reflects the state of an icon

Accessibility

Labels are screen readable.

Accessibility

Solid icons are accessible much the same as solid buttons are. We have accounted for low vision, colorblindness, and blindness with contrast improvements, color differentiation, and screen reading.

Accessible colors and their contrast ratios
Accessible colors and their contrast ratios.

Overview

AccessibilitySource, Source
DefaultOff: — 4.49:1
On: — 4.58:1
HoverOff: — 10.56:1
On: — 7.75:1
ActiveOff: — 16.65:1
On: — 11.88:1
FocusDefault browser focus on 32x32 hit box (desktop).
Scannability7/8 color blindness coverage - Monochromacy fail

User delight and clarity

Animation provides delight for users taking monotonous actions as well as clarity and confirmation on binary actions.

Animation

  • Provides clarity and confirmation on binary actions when the icon is the sole source of feedback.
  • Provides delight for monotonous actions.
  • Does not interfere with bulk processes.
  • Provides affordances for required action.

Timing and conversion

Animations for icon interactions should have a 1 second duration. Adobe Premier prototypes will often reference specific keyframes, while CSS animations are defined as percentage values. To convert from keyframe to percentage, divide the keyframe number by 30, e.g., frame 15 / 30 frames per second would translate to 50% in CSS. Round to the closest whole number i.e., 33% rather than 33.3333%.

Pacing and Timing Functions

In Premier, interpolation can be set and adjusted on frame-by-frame and animation-by-animation basis. CSS Keyframe animations use a property called animation-timing-function which accepts standard pre-built functions like linear , ease-in or custom values via CSS’ cubic-bezier() function. The base curve used for our icon interactions is .33, 0, .67, 1.

The CSS keyframe animation API does not provide a way to alter an animation’s curve once it has been set via the animation-timing-function. Fortunately, it is possible to change this value via JavaScript by altering the icon’s animationTimingFunction function e.g., el.style.animationTimingFunction = "1, 0, .95, .6";. This JavaScript override can be implemented via setTimeout(), see this CodePen demo for an example.

Parameters

We can animate with the following parameters via CSS Keyframe Animations, Position (e.g., translateY, translateX ), Scale, Rotation and Opacity.

Accessibility

Uses a combination of motion and scale to provide futher affordances to people with disabilities.

Reactions

An icon swap takes place to reflect the state of the reaction…
An icon swap takes place to reflect the state of the reaction…

Required actions

A brief, subtle animation plays when a disabled trigger is validated.
A brief, subtle animation plays when a disabled trigger is validated.

Sizing iconsCopy URL

Our icons adhere to our 8px grid. The following sizes and padding are recommended:

SizeDescriptionPadding
12px (Legacy)Minispace size 200
16pxDefaultspace size 300
24px (Legacy)Mediumspace size 350
32pxLargespace size 400
64pxJumbospace size 500

Legacy sizing is available for usage in existing code. Legacy sizes are not pixel perfect and are discouraged in new work.

An example of padded icons. A 16px an icon occupies 32 total pixels of space.
An example of padded icons. A 16px an icon occupies 32 total pixels of space.

Naming iconsCopy URL

In a high level icon library that spans across numerous products, proper, easy to understand naming is essential. It is also important that icons have the same meaning in in all context, e.g., a building icon should represent “business” in one context and “partner program” in another, nor should a star represent “favorite” in one context and “rating” in another. See naming guidelines detailed below:

  • Use a hyphen “-” as the delimiter between words e.g. arrow-up
  • Use lowercase rather than capitalization or camelCase or PascalCase
  • Use generic names for global, multi-purpose icons, e.g., an arrow that is be used for sorting in both Analytics and the Smart Inbox should not be called inbox-arrow.
  • Use specific names for product and feature specific icons, e.g., of a calendar icon is used to represent a feature in one context, it should not be used for a date picker in another.

Do’s and don’tsCopy URL

  • DO: Use universal icons sourced from Font Awesome when possible.
  • DON’T: Use icons at an arbitrary size. Please see the Sizing Icons section for guidance.
  • DON’T: Re-use a branded icon for another purpose e.g. if is for ads, don’t use it for sales leads feature.
  • DON’T: Modify partner icons. Certain partners such as Google Analytics specify require multi toned icons, these principals must be upheld in our various uses.
  • DON’T: Add single purpose, temporary or one off icons that have a high potential of never being used again. Icons should never be duplicated, if naming discrepancies arise, the icon in question should be renamed to resolve.

AccessibilityCopy URL

  • The visual presentation of graphical objects that are essential for understanding the content or functionality have a contrast ratio of at least 4.5:1 against the adjacent color(s), except for the following:
    1. Thicker: where the minimum width and height of the graphical object is at least 3 CSS pixels the graphic has a contrast ratio of at least 3:1.
    2. Sensory: Non-text content that is primarily intended to create a visual sensory experience has no minimum contrast requirement.
    3. Logotypes: Graphics that are part of a logo or brand name have no minimum contrast requirement.
  • Standalone SVG icons that are not accompanied by text and not part of the Racine or Dearborn components should include <title> tag to describe the icon’s purpose.
  • Unless an icon is purely decorative, alt text should be provided so that users who take advantage of screen readers can understand the content. If an icon is purely decorative, set aria-hidden="true" so that it is not picked up by screen readers. When adding new icons to the library, be sure that they include a <title> tag so that they can be properly identified by screen readers.
  • Any additional assistive text or attributes not listed above should be applied to the icon’s parent element.

Additional resourcesCopy URL