Icons

The Neo icon family is a collection of symbols used to represent ideas, objects, and actions. They communicate content at a glance, provide interactivity, and draw attention to important information.

• Interactive Playground
• Anatomy
• Behavior
• Specs
• Related Content

The Interactive Playground allows you to experiment with various icon styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<span
  role="img"
  aria-label="info icon"
  class="neo-icon-info neo-icon--large"
>
</span>

<Icon
  aria-label="info icon"
  icon="info"
  size="lg"
  status={undefined}
/>

Icons have a simple format, and are best accompanied by a text label. However, where there is insufficient space to include a label, the icon may appear by itself with the label moved into a tooltip.

• Icon:

  This is the graphic depiction of the associated action.

• Label:

  Whenever there is enough room, a label should be included beside the icon to describe its function to the user.

Icons are used to visually convey the action taken when that element is selected. They communicate content at a glance, provide interactivity, and draw attention to important information. Icons should not be used simply for decoration.

Color

All icons can take on any color in the Neo design system, but the associated text must use the same color. Stronger colors can make an important icon standout among other options, but don’t use too much color or the value is lost.

DO: Use a single color for the icon and its label.

DON'T: Do not use different colors on the icon and the label.

Labels

Whenever possible, icons should be accompanied by descriptive text since this better communicates each element's function than icons alone do. If there is not enough space for an icon to have text beside it, include a tooltip with the required text.

DO: Add a label next to an icon whenever possible.

DO: If there is insufficient space to add a label, put the text into a tooltip.

Status Indicator

Icon states are used to show the current status of a channel, device, or function (e.g. Which device is active, Connected/Not Connected).

DO: Use the designated color associated with each status indicator

DO: Do not make the status indicator and the channel icon to be the in the same color or use a different color than its designated color.

Alignment

When icons are used with text, they should be aligned to the center of the first (or only) line of text. An icon always appears to the left of the text label.

Icons come in 3 sizes. Use the largest size that best fits into the available space for your situation.

Large

Medium

Small