Iconography

Simplifying complex concepts for our users

Iconography overview

Icons are made up of familiar elements that help readers quickly grasp concepts and ideas, preferably without the need for explanatory text.

We’ve curated a set of commercially available icons developed by Streamline Icons. They’ve been vetted across audiences in various industries and have proven effective in our own product UI. The icons are available in PowerPoint and as Adobe Illustrator files.

Usage

Use icons sparingly (no more than 3-4 icons is ideal) to break up text while also highlighting the key content within a layout. Choose icons that clearly convey the primary objective of the content.

 

In diagrams and infographics, make sure the meaning of each icon is clear and not lost in the big picture. There also should be a clear hierarchy in all the information that is presented.

 

Because we use a single set of icons in both our products and marketing materials, make sure the icons you choose are representing the same ideas consistently across mediums.

Color

The icons may be used in all colors of our palette:

  • Five color families (30 total colors)
  • Grays (6 versions)
  • Black and white

Visit the color page to see all the colors. With such a wide range of icon colors, it’s important to follow the color usage guidelines in the following sections.

Tone on tone

When applying a light-colored icon on a dark-colored background or vice versa, apply a 2-step difference to ensure sufficient contrast.

Icon and background color combinations must stay within their respective color family.

An icon in Green 10 can sit on Green 40, 50, or 60 backgrounds. (The same guidance applies to each color family.)

An icon in Green 60 can sit on Green 10, 20, or 30 backgrounds. (The same guidance applies to each color family.)

Black and white on color

Black and white icons can sit on all the palette colors with the following parameters:

Black icons can sit on the 10, 20, and 30 values of each color. (The same guidance applies to each color family.)

White icons can sit on the 40, 50, and 60 values of each color. (The same guidance applies to each color family.)

Black on white or white on black

Icons can be black and sit on a white background, or vice versa.

Grays on black or white

Gray 10, 20, 30, 40, and 50 icons can sit on a black background.

Gray 20, 30, 40, 50, and 60 icons can sit on a white background.

Help

Click a question below to see the answer.

Where can I find iconography?

We have licensed the universally available Streamline icons as our primary set. It is also the same icon library used by our Product team for various applications, including interface and navigation. You’ll find primarily the Streamline Light icons in the downloads tab on the Iconography page.

How do I know which file format to use?

Use .eps files for printing and for images at large sizes. Use .png files on websites and in PowerPoint presentations. Scalable vector graphics files, or SVGs, are ideal for graphics on websites, including icons, simple line graphics, logos, and imagery that are repeated on a web page.

What is the difference between an icon and a logo?

A logo is a recognizable symbol primarily used to represent a business or an organization. A logo must be immediately associated with the organization it represents and is a graphical signifier of the company’s brand using images, text, or both.

 

Icons are commonly used in applications to represent something an application does. Icons show us ideas, concepts, or actions. Icons are visual descriptions of function; they represent an operation through a graphical symbol.

Can I create my own icon?

We prefer that you do not create your own icon so we can maintain consistency of our identity system. If you need an icon that isn’t available, send us a note in the messenger (blue button in the bottom right of the site).

Still have a question? Send us a message.