Icons

These icons allow our users to quickly see interface intent at a glance and take part in establishing hierarchy.

Icons also assist with accessibility in scenarios of low literacy or English proficiency.

Design Guidelines

Interface Icons vs. Picture Icons

The San Francisco Design System utilizes two types of images to assist users; interface icons and Picture icons.

Interface icons, or just icons, are generally used to convey an action or intent and are not illustrative or decorative.

Picture icons serve some of the same purposes as the interface icons but in a more expressive way.

Deciding on a new icon

Before creating a new icon, pause and look for an icon in the SF DesSys icon library that clearly conveys your message; there’s no reason to bloat the icon library for the sake of having variety.

SF DesSys icon library

In this case, the calendar icon can represent and event and a calendar toggle button

Once you’ve decided that there is a need for a new icon, you have to decide on the best way to represent the concept. In most cases, there is a representation of that idea that already exists.

A search for delete icon will generally display a trashcan or an x mark

Creating a new icon

Great! You’ve decided there is a need for this icon, and you know exactly what it should be. We’ve created guidelines to help your new icon feel like a cohesive member of the San Francisco Design System.

Interface icons

Workspace

20px x 20px artboard with a 1px grid, and a 2px padding.

Keylines & base shapes

We utilize keylines to assist with the design of our icons. Having key shapes as part of the icon template allows for uniformity of size and dimension across our libraries and the general shape of the icon.

We have our orthaganals and keyshapes listed below

Style

Stroke

Draw interface icons with a consistent 2px stroke both on the inside and outside strokes of the icon.

Fill vs. no fill

Currently, SFDesSys icons contain no fill beyond the stroke’s fill.

• Icon is drawn with a stroke only

• The icon should not be filled with color

Corners

The corner radius on the outside of the stroke is 1px, while on the inside of the stroke is 0px.

Icon perspective

Make sure to illustrate the icons from the same perspective as the other icons. SFDesSys icons are drawn in a single-point, forward-facing view.

• Icons should be drawn from a single point

• Icon is drawn in an isometric style

Usage Guidelines

When to use

It’s primarily up to the designer when to introduce an icon to their design. The designer should ask if an icon will enhance the experience of the user or create noise and confusion.

Guide for use

Sizing

The icons are sized at 20px and should generally not be scaled beyond that size.

• Icon is implemented at 20px

• Icon has been scaled beyond the recommended 20px

Margins & padding

We’ve created all icons 2px padding, and that padding should not be infringed upon by other icons or text.

• The right padding of the icon is respected

• The right padding on the icon has been ignored and crowds the label

Alignment

The icons should be center aligned to the accompanying label and not to the baseline of the icon.

• Icon is center aligned with the label

• The icon and text should not sit on the same baseline

Label Placement

A label should generally accompany icons with a few exceptions. When in doubt, get a sanity check from other designers, your accessibility professional, or quick tests.

• An uncommon icon has an accompanying label for clarity

• The icon is alone in the button and its purpose may not be clear

Color

Icons should be a single color and have the same color as their label.

• The icon and label are both the same slate blue

• The icon's color should be updated to match the label