Best Practices

Icons should communicate a message, so prioritize applying ones that are simple, easily recognizable, or well-established as conventions, and avoid metaphoric symbols.

In Shoreline, they are identified by the prefix Icon and their naming convention is Icon[Name][Modifier]. The name is always the same from the Phosphor (opens in a new tab) library and the modifier can be related to its weight or size. Most icons have a normal size and an outline weight, so these modifiers won't be mentioned in their names. The modifiers fill and small are always specified. For example, the IconTag is normal and outlined, IconBellFill is normal and filled, and IconCheckSmall is small and outlined.

Modifiers

Weight

• Outline: Default weight (1.5px stroke, light weight in Phosphor) used in interactive elements (Button, Search, Sidebar sections).
• Fill: Used in non-interactive elements (Alerts, Toasts), for informative purposes.

Size

• Normal: Default size (20px) used in most scenarios (Button, Alert, Toast, Sidebar sections).
• Small: In-line appropriate size (16px) used for affordance purposes (caret in a Menu or Filter, arrow for external links).

Usage

• Only modify the size of an icon when applying it as an Empty State (opens in a new tab) illustration, maintaining the 1.5px stroke. Don't modify the size of an icon in other scenarios.
• If you want to represent an action with only an icon and no visible label, use the IconButton (opens in a new tab).
• When applying color to an icon, follow the Color (opens in a new tab) guidelines. Don't change the color of icons inside components, such as Buttons, Alerts, and Toasts.

New icons

If there's no icon already in Shoreline that fits your needs, follow the contribution guidelines (opens in a new tab) to request or propose one. As mentioned in the rationale (opens in a new tab), custom-designed icons are strongly discouraged to avoid inconsistency, but if there are no options in the Phosphor library we can start a discussion.