Home sf symbols
Post
Cancel

sf symbols

SF Symbols

Providing images for different appearances

Create Scalable and Tintable Images Using Symbol Images

In iOS, tvOS, and watchOS, use symbol images in places where you would usually combine images and text to form icons.

A symbol image is a vector-based image that you use in places where you want to display a simple shape or glyph.

Symbol images have several advantages:

  • They scale without losing any of their sharpness.
  • You can tint them with an appropriate color.
  • They include a baseline for layout with text.
  • You can configure them with font-related style information to make them appear as if they belong to that font.

Configuring and Displaying Symbol Images in Your UI

1
2
3
4
5
// 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")
1
2
3
4
5
6
7
8
// Create a configuration object that’s initialized with two palette colors.
var config = UIImage.SymbolConfiguration(paletteColors: [.systemTeal, .systemGray5])

// Apply a configuration that scales to the system font point size of 42.
config = config.applying(UIImage.SymbolConfiguration(font: .systemFont(ofSize: 42.0)))

// Apply the configuration to an image view.
imageView.preferredSymbolConfiguration = config
1
2
3
4
5
// Create an object configured for palette rendering mode.
let config = UIImage.SymbolConfiguration(paletteColors: [.systemTeal, .systemGray])

// Create a new symbol image using the configuration object.
imageView.image = image.applyingSymbolConfiguration(config)
1
2
3
// Create a large scaled symbol image using UIKit.
var config = UIImage.SymbolConfiguration(scale: .large)
imageView.image = image.withSymbolConfiguration(config)
1
2
3
4
5
// Create a custom symbol image.
let image = UIImage(named: "custom.multiply.circle")

// Add an offset of 2.0 points from the baseline.
let baselineImage = image?.withBaselineOffset(fromBottom: 2.0)

Creating Custom Symbol Images for Your App

  1. Export an SVG file from the SF Symbols app.
  2. Edit the SVG file in a vector-drawing app.
  3. Export the file from your drawing app as an SVG file.
  4. Validate the SVG file using the SF Symbols app.
  5. Import the custom symbol into the SF Symbols app and organize it into a group.
  6. Add annotations, if necessary.
  7. Export a template file for distribution.
This post is licensed under CC BY 4.0 by the author.