SF Symbol Creator

About this plugin

Create, preview, and export SF Symbols 3 icons for use in macOS and iOS applications

Rendering modes

macOS and iOS can display your icons in different modes:

- Monochrome Mode: Layers are displayed using a single color

- Hierarchical Mode: Layers are displayed using a single color, but with different transparencies.

- Palette Mode:  Layers are displayed using different colors

- Multicolor Mode: Layers are displayed using different colors as defined by the creator

Colors need to be picked from the defined palette of system colors, which can be automatically added to your document by the plugin.

Layers and naming

Use a Component with Variants. Individual icons should be named Name=your-icon-name, Size=16. Layer names don’t matter, but the layer order does for display in Hierarchy Mode. You can have a maximum of three layers per icon, but a layer can consist of multiple shapes merged together.

Creating shapes

Layers need to be flattened and ungrouped.

Figma’s path logic doesn’t always match what SF Symbols expects. This can result in inner gaps being filled in when they shouldn’t. This is a known issue and has been reported. Here are some tips to prevent this:

- Use the Pen tool as much as possible. Even to create basic shapes like rectangles and ovals

- Use Exclude Selection instead of Subtract Selection for boolean groups

- Use the Flatten Selection (Cmd+E) command to flatten boolean groups

- Use the Outline Stroke (Cmd+Shft+O) command to turn strokes into paths

The plugin will warn you about any issues when exporting. If the icon still doesn’t render correctly, try to link inner gaps with the outside of the icon by an invisible 0 width channel. Or cut a shape up into separate paths so that there are no inside gaps and then Union them together.

Exporting

After exporting you can extract the .zip file and drag and drop the .svg files into the SF Symbols 3 app.

Note: currently only a single weight is supported.