Icons

View all icons in our Icons Library.

Types

There are two icon styles available:

• Duotone: These icons use overlapping shapes to represent that we are matchmakers. The deep purple where the shapes connect illustrates the link between people and cars.
• Interface: For our general interface icons, we use the Feather open-source icon library. This set has a thicker, rounded, more comfortable and familiar feel to add delight while not distracting from the content.

Usage

Icons should be used as aids to navigation or visual and informative indicators for associated actions. They should be used sparingly so as to reduce cognitive load and provide clarity for users.

It is recommended that all icons either be accompanied with text or built with accompanying accessible text within the SVG code.

Iconography is not to be confused with illustration, which is a hand-drawn art form that should potentially be treated differently in file format.

Duotone icons should only be used to mark the beginning of a section, or highlight a particular area, preferably those that pertain to matchmaking. They should not be interactive or be included in linked areas.

Interface icons should accompany text, live inside buttons or controls, or signify utility throughout the Cars.com interface.

Specific use cases

Play button and icon

• When the play icon sits on a white background (when accompanying text, for example), it should be displayed in its outline form. When the icon sits in a disc as an icon button, the triangle should be filled.

Sizing

Duotone icons should be displayed at sizes starting at:

• 32px x 32px

Interface icons should always be displayed in one of two sizes (viewbox size):

• 16px x 16px
• 24px x 24px

Size selection is primarily based on font-size of accompanying label, quantity needed, and surrounding elements that affect look and feel.

In the icons library, PNG icon formats are available. These are intended for mobile apps, and web interfaces should make sure of SVG only. Duotone PNGs are provided at 96px x 96px sizes, and Interface style PNGs are provided at 48x48px size. These are sized at twice their recommended largest size so that they display crisp on high resolution displays.

For icons that should act as stand-alone buttons or links, use the Icon button variant.

Color

The colors that comprise the Duotone icons are #532380, #250858, and #00BFDE.

The recommended fill color for all Interface icons is #212121. #ffffff is recommended on inverse background colors. #555555 may be used for icon fills on low-priority items.

When designing with iconography, maintain the standard fill color and do not apply link, branding, or other color fills.

Creating and exporting SVGs

When creating and exporting SVG icons, please take into account the following considerations:

• Export the icon using Adobe Illustrator CC whenever possible, using Export > Export for screens. This produces the cleanest final SVG markup.
• Name the icon by what it represents in the art, not what it may be used for in context of any one given page.

Library

This library is maintained in Figma by the Product Design team.