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.
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
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.
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.
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
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
The corner radius on the outside of the stroke is 1px, while on the inside of the stroke is 0px.
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
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
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