Skip to main content


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

A calendar icon being used with the word Events and as calendar icon
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.

Examples of delete icons
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


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

A 20px by 20px artboard with guides

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

Icon artboard keylinesCircle Icon artboardSquare Icon artboardPortrait rectangle Icon artboardLandscape rectangle Icon artboard



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

Displaying the use of 2px stroke width throughout icon
Fill vs. no fill

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

Correctly displaying an outlined icon
  • Icon is drawn with a stroke only
An icon with a fill instead of outlined
  • The icon should not be filled with color

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

1px corner radius displayed using a circle
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.

Icon illustrated from a single-point perspective
  • Icons should be drawn from a single point
Icon illustrated in an isometric way
  • 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


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


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


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