Refine By

Iconography

  • Contents:

Icons are graphic elements used to convey the meaning behind an object, idea or action in a concise format.

Download the Fractal Icon Grid .ai file to use as a guide when you create a new icon. Contact the Fractal team or your design manager if you have questions using the grid.

Guidelines

In general, icons should always be accompanied by labels. Don’t rely on hover effects to reveal icon labels. Not only does it increase interaction costs, but it also fails to translate well to touch devices.

The few exceptions are:

  • Component-specific controls, like player controls or carousel arrows
  • Social media icons
  • Map icons in an interactive map experience
  • Favoriting an item in a list of options within a user’s account, such as favorite hotels and rooms

Be sure icons are always used in the same context throughout an experience. Don’t use two icons for the same thing; don’t use one icon for two different things.

Icon anatomy

Stroke

Follow these stroke properties for icon design.

Remember to start designing the icon at the 24×24px grid size. Adobe Illustrator is the preferred application for icon design.

Note: when scaling an icon either up or down in size, set the stroke to scale, and group the icon with its outer (24px) bounding box.

  1. Stroke Weight: 1pt/1px
  2. Align Stroke: Center
  3. Stroke Cap: Round
  4. Stroke Corner: Round Join

 

Corner radius

We recommend to only use the following corner radius values:
Small (1px)
Medium (2px)
Large (4px)

You can use a mixture of these radius values within an icon if required.

  1. Medium (2px) Corner Radius
  2. Small (1px) Corner Radius

Solids

Some icons may require a solid variant to be created, in this case use the “Exclude” tool from the Pathfinder palette to cut out inner shapes. Stroke properties are the same as with outlined icons. 

Note: It may be best to start with an outlined icon, then convert it to a solid variant once approved. If any solid portions of the icon require a line overlay, you will need to outline any paths.

  1. Apply a stroke to the shape 
  2. “Exclude” interior shapes using Pathfinder tool

Visual style

Our icons are characterized by their simplicity. They must work seamlessly across different channels with different background colors, and they need to work at a minimum scale of 14×14px. Don’t use cluttered shapes or paths, subjective concepts, or overly complex designs.

Note: It’s ok to use an existing or stock icon as a reference point.

Creating new icons

Start design of icon at 24px x 24px.

The size (in pixels) of the icon space and bounding box (icon container).

This safe area (or bleed area) should be kept clear. It provides a clean space around icon shapes and strokes. No shape, stroke or fill should extend into or fall within this safe area.

The pixel grid. All points, shapes, strokes, or fills must align (snap) to this grid.

Using keylines

Keyline is the foundation of the icon grid. Always use keylines when creating new icons to maintain visual consistency.

Keylines represent a series of alignment lines to aid in icon production. Depending on the icon’s proportions, you can align to either the square, circle or rectangular keyline guides.

The square guide has a corner radius of 2px and is used for square proportioned icons.

Note: Icons that use a square boundary line (e.g. parking icon) must align their outer boundary to an 18px square shape.

The circle guide is used for circular proportioned icons. Icons that use a circle boundary line (e.g. information icon) must align their outer boundary to this 18px circle shape.

The horizontal rectangle guide has a corner radius of 2px and is used for horizontally proportioned icons.

The vertical rectangle guide has a corner radius of 2px and is used for vertically proportioned icons.

Icon specs

Icon sizes:

  • 14x14px (extra small)
  • 16x16px (small)
  • 24x24px (medium)
  • 48x48px (large)

Stroke

  • Stroke Weight: 1pt/1px
  • Align Stroke: Center
  • Stroke Cap: Round
  • Stroke Corner: Round Join

Corner radius

  • 1px (small)
  • 2px (medium)
  • 4px (large)

Icon style

  • Outline
  • Solid
  • Open stroke when appropriate
  • Simple and clear

Accessibility

Provide screen reader announcements for all icons, especially if they are not accompanied by visual labels that convey meaning.

The screen reader announcement should communicate the purpose for touchable icons that link to a target. For example, a Facebook icon that links to a profile or the “heart” icon.

In lists that repeat a single icon, ensure the screen reader announcement is contextual to the information. For example, a list of hotels could have the announcement: “Select to favorite this hotel.”