Icon
Icon Colors
Default
The majority of icons will default to #FFFFFF. In creating designs, designers are free to tint the icons to one of the other colors depending on need. This can include highlighting functionality, harmonizing the color palette, integrating with a button, etc.
When used within a button, the icon should use the same color as the button text.
<Icon icon="ball-pile" />
Primary #FFFFFF
Secondary #AB91FC
Commonly used to provide contrast and establish visual harmony, particularly when used in conjunction with the Outline button.
Default-Dark #050505
Required for use on lighter backgrounds and to ensure ADA compliance.
Disabled #828282
Colors Indicating Status
- danger #FF4D4D
- alert #F5A624
- success #3BB042
- Typically used to indicate editing functions
- Also used for dual-action icons in their “on” state
- information #AB91FC
Container Appearance
Except where specified, all icons require a container. The container serves two purposes:
- To reflect different states (default, hover, disabled, etc.)
- To standardize the appearance of icons of varying dimensions
Default
The default fill should be invisible. This can be accomplished by matching the color of the container to the background, or by leaving it empty (the latter is what is used in Sketch files).
Hover
- Fill: #383838
- Border: n/a
On Click
- Fill: #383838
- Border: n/a
Active (Select icons only)
- Fill and Border should be transparent
- This is one of two instances in which an icon changes color to indicate function, rather than the container changing color. The icon itself will turn green-50.
Focus
- Fill: n/a
- Border
- #FFFFFF
- 2px wide for base icon
- Gaussian blur of 1
- Inner shadow #000000 with an Alpha of 30%
- X=0
- Y=1
- BLUR=1
- SPREAD=0
Disabled
- Fill: n/a
- Fill and Border should be transparent
- This is one of two instances in which an icon changes color to indicate function (rather than the container changing color). The icon itself will turn #828282.
Sizing
Small (Base)
- the icon must be a maximum of 12x12px, situated inside a container of 16x16px
- container has a corner radius of 2
Medium (not currently in use in the app)
- the icon itself must be a maximum of 16x16px, situated inside a container of 20x20px
- container has a corner radius of 2
Navigation Icons
- Navigation icons are located on the left and top navigational bars of the app.
- The icon itself must be a maximum of 16x16px, situated inside a container of 20x20px
- container has a corner radius of 2
Icons with No Containers
Other
- the X modal close icon is 16x16px
Pill
- the edit and Xicons are 12x12px
Beta
- the beta icon (a custom made flask) is meant to be used temporarily to call out features that are in beta
- it is purely for informative purposes and is therefore not clickable and does not require a container
- the typical size is 10x12px but can be adjusted depending on usage