Create Custom Symbols LOGO

中文FAQContact & Support

Create Custom Symbols

Create Custom Symbols AppStore

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

RegexMate screenshots-1

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.

RegexMate screenshots-2

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

RegexMate screenshots-3

RegexMate screenshots-4

Frequently Asked Questions

How to Use Your Custom SF Symbol in SwiftUI?

// Your custom symbol at Medium scale, Regular weight

// Your custom symbol at large scale, 21pt font and Heavy weight
    .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")?
            pointSize: 17,
            weight: .semibold,
            scale: .large

How to Use Your Custom SF Symbol in AppKit?

let customSymbol:NSImage? = NSImage(named: "MyCustomSymbolName")?
            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: "")                  

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

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 the official documentation, manually adding styles, still trying to support it in the future.

  .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 }

<g id="Symbols">
  <!-- A variant containing three shapes with multicolor and hierarchical annotations. -->
  <g id="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. -->
      <path class="multicolor-0:systemBlueColor hierarchical-1:primary" d="...">
      <!-- Two additional shapes. -->
      <path class="multicolor-1:white hierarchical-1:primary" d="...">
      <path class="multicolor-2:tintColor hierarchical-0:tertiary" d="...">

More FAQs…