Create Custom Symbols

中文 •FAQ •Contact & Support •Changelog

A tool that can convert any SVG icon into aCustom SF symbol. Your customized SF symbol can be imported into Xcode and utilized in any project based on UIKit or SwiftUI.

Effortlessly convert any SVG icon into an SF symbol file usable in Xcode by simply dragging and dropping the icon, enabling swift creation of SF symbol files.

Support batch import of SVG icons and batch generation of SF symbol icons.

Frequently Asked Questions

How to Use Your Custom SF Symbol in SwiftUI?

// Your custom symbol at Medium scale, Regular weightImage("myCustomSymbolName")// Your custom symbol at large scale, 21pt font and Heavy weightImage("myCustomSymbolName").imageScale(.large).font(Font.system(size:21, weight:.heavy))

You can also display custom symbols alongside some text.

VStack{(Text("Some Text ")+Text(Image("myCustomSymbolName"))+Text(" more text")).imageScale(.large)}

How to Use Your Custom SF Symbol in UIKit?

let customSymbol:UIImage?=UIImage(named:"MyCustomSymbolName")?.applyingSymbolConfiguration(UIImage.SymbolConfiguration(            pointSize:17,            weight:.semibold,            scale:.large))

How to Use Your Custom SF Symbol in AppKit?

let customSymbol:NSImage?=NSImage(named:"MyCustomSymbolName")?.withSymbolConfiguration(NSImage.SymbolConfiguration(            pointSize:24,            weight:.bold,            scale:.large))

Apply a specific appearance to a symbol image

var configuration=NSImage.SymbolConfiguration(    paletteColors:[.systemTeal,.systemGray])configuration= config.applying(.init(textStyle:.title1))imageView.symbolConfiguration= config

How to Use Your Custom SF Symbol in UIKit?

// Create a system symbol image.let image=UIImage(systemName:"multiply.circle.fill")// Create a custom symbol image using an asset in an asset catalog in Xcode.let image=UIImage(named:"custom.multiply.circle")

How to add custom SF symbols to a string?

Text("Use\(Image("myCustomSymbolName")) to crop the image")

How to define colorful SF symbols?

Currently not supported, according to theofficial documentation, manually adding styles, still trying to support it in the future.

<style>.multicolor-0:systemBlueColor{fill:#007AFF;opacity:1.0}.multicolor-1:white{fill:#FFFFFF;opacity:1.0}.multicolor-2:tintColor{fill:#007AFF;opacity:1.0}.hierarchical-0:tertiary{fill:#8E8E8E}.hierarchical-1:primary{fill:#212121}</style><gid="Symbols"><!-- A variant containing three shapes with multicolor and hierarchical annotations. --><gid="Regular-M"transform="matrix(1 0 0 1 2853.78 1556)"><!-- The shape is in the first multicolor layer, whose fill color is systemBlueColor.        It’s also in the first layer for hierarchical rendering, and the level is primary. --><pathclass="multicolor-0:systemBlueColor hierarchical-1:primary"d="..."/><!-- Two additional shapes. --><pathclass="multicolor-1:white hierarchical-1:primary"d="..."><pathclass="multicolor-2:tintColor hierarchical-0:tertiary"d="..."></g></g>

How to Enable Multi-Color Support for Custom Symbols?

Thanks to@ldowens for providing a method to enable multi-color support for custom symbols.

Step 1: Create and Export the Symbol

In theCreate Custom Symbols application, create a new symbol usingSVG and export it.

Step 2: Import into SF Symbols and Set Colors

Drag the exportedSymbols.symbols.svg file into theSF Symbols application and create layers.

Follow the steps below to set colors for your custom symbol:

Step 3: Export the Multi-Color Symbol

Once the colors are set, export the symbol icon from theSF Symbols application.

More FAQs…