You’ll need to turn on JavaScript in your browser settings to use this site.
Skip to content
Indeed Design
Indeed DesignArticlesJobs
OverviewLogoColorTypographyVoiceImageryIllustrationShapeMotionProductIconographyResources
Brand guidelines

Iconography

Guiding but never distracting, our icons focus on function over frills. They use a visual language that everyone can understand to add explanation at a glance and bring clarity to dense designs.

Indeed.com job card with icons by important noninteractive UI text, like a magenta clock with text "Urgently hiring."

Using icons in your designs

In both product and marketing, icons support usability and help users navigate experiences. Because of this, icons should not be used as decoration — in those cases, illustrations are the right choice.

Indeed virtual interview room, microphone icon with label "mute", camera icon with label "stop video", X icon with label "end"

Icon Types

Indeed brand mail icon

General

You may use most icons in the library at your discretion. They have no hierarchy. The ribbon icon representing an award holds the same weight as the vehicle icon representing travel.

Indeed brand settings icon

Navigational

Users rely on these icons. Simple, abstract designs like chevrons, arrows, and hamburgers, as well as icons representing utilities like profile and settings help people get around the product. These icons should be used only for their intended purposes to keep their meanings clear.

Indeed brand lock icon

Special use

Icons designed for specific products or uses, including logos. Consider these off-limits without approval.

Style and implementation

Sizes

Icons come in three sizes:
24px
20px
18px

Pairing

When pairing icons with text we recommend the following:
Level 1(Icon 18px, Font 12px)
Company name
Level 3(Icon 18px, Font 16px)
Company name

Level 2(Icon 18px, Font 14px)
Company name
Level 4(Icon 20px, Font 16px)
Company name

Color

Only apply color to help convey meaning, not for decoration. Use a minimum contrast ratio of 3:1. Colors must have at least a 40% difference in tonal value to achieve that contrast ratio.
3:1
0
10
20
30
40
50
60
70
80
90
100

Recommendations

Do provide adequate container size

Use the appropriate size of icon and container.

Do center align to text

This keeps the two visually connected.

Do use existing conventions

Use established conventions for icons.

Do pair icons with labels

Pairing text with icons clarifies its intended use.

Do apply solid brand colors

Use colors according to their definition and meaning.

Don't use small containers

Don’t overlap the bounding area of icons when placing inside a container.

Don’t baseline align to text

The two will look off.

Don’t redefine function

Use icons according to accepted meanings and conventions.

Don't use icons without labels

Always pair them with text.

Don't apply mixed colors

No duo-tone or multicolor icons.

Library

Explore the icons that mark the actions and directions people can take in our products.

External partners and agencies should ask their Indeed point of contact for access. Indeed employees can visit the icon library directly. (This library is only for use in product applications.)

ProductResources

Indeed Design

TwitterInstagramLinkedInMediumMedium
  • Home
  • Brand guidelines
  • Articles
  • Resources

© 2024 Indeed
  • Your Privacy Choices