The Complete Guide to SF Symbols – Hacking with Swift

SF Symbols permits us to render an enormous and rising number of icons inside our apps, and yearly it will get larger – not solely do many extra icons get added, however iOS 14 added the flexibility to render multicolor icons and iOS 15 added the flexibility to have full management over particular person layers.

On this article I’m going to stroll you the right way to use SF Symbols in your initiatives, offering code for each SwiftUI and UIKit. Let’s get into it…

Tip: One of the simplest ways to browse the listing of symbols is utilizing Apple’s free SF Symbols app.

Sponsor Hacking with Swift and reach the world’s largest Swift community!

Tips on how to load an SF Image

The only factor you’re going to wish to do is load a logo. We’ll be utilizing “star” right here, however should you’re utilizing the SF Symbols app you’ll be able to right-click any image and select Copy Identify.

In SwiftUI loading a picture is completed by inserting an Picture into your view hierarchy utilizing its systemName initializer:

Picture(systemName: "star")

In UIKit you could use UIImage then place it in a UIImageView, like this:

let picture = UIImage(systemName: "star")
let imageView = UIImageView(picture: picture)

Tips on how to place SF Symbols subsequent to textual content

SF Symbols work nice when used inside textual content, significantly after they comprise frequent symbols equivalent to error crosses, examine marks, calendars, and related.

In SwiftUI inserting a picture subsequent to textual content is completed like this:

Label("Please strive once more", systemImage: "xmark.circle")

If you wish to place it contained in the textual content string, it’s higher to make use of string interpolation with Picture, like this:

Textual content("Please press the (Picture(systemName: "calendar")) button")

For UIKit the code is a bit more advanced as a result of you could use NSAttributedString and NSTextAttachment to render one thing right into a UILabel, however the identical code helps you to place the photographs wherever you need them:

let attachment = NSTextAttachment()
attachment.picture = UIImage(systemName: "xmark.circle")

let imageString = NSMutableAttributedString(attachment: attachment)
let textString = NSAttributedString(string: "Please strive once more")
imageString.append(textString)

let label = UILabel()
label.attributedText = imageString
label.sizeToFit()

Tips on how to change the scale of an SF Image

SF Symbols are fully vector graphics, so you’ll be able to alter their measurement freely with out dropping high quality. This additionally works for the built-in Dynamic Sort sizes, the place SF Symbols will adapt themselves to match different textual content in your UI.

In SwiftUI, adjusting the scale an SF Image is completed utilizing the font() modifier with a built-in textual content fashion, like this:

Picture(systemName: "airplane")
    .font(.largeTitle)

Or utilizing a customized font measurement like this:

Picture(systemName: "home")
    .font(.system(measurement: 72))

In UIKit, adjusting the scale of a logo is completed utilizing UIImage.SymbolConfiguration, like this:

let config = UIImage.SymbolConfiguration(textStyle: .largeTitle)
let picture = UIImage(systemName: "airplane", withConfiguration: config)

Or utilizing a customized font measurement like this:

let config = UIImage.SymbolConfiguration(pointSize: 72)
let picture = UIImage(systemName: "airplane", withConfiguration: config)

Tips on how to alter the size of an SF Image

You’ve simply seen how SF Symbols can have customized font sizes connected, permitting them to circulate inside your textual content neatly. Nevertheless, we will additionally scale SF Symbols to be barely smaller or barely bigger, impartial on their font measurement, which permits you much more fine-grained management over how they give the impression of being in your UI.

In SwiftUI, you alter the size of an SF Image like this:

Picture(systemName: "home")
    .imageScale(.massive)

As I stated, this occurs together with any customized font, so you should utilize each if you’d like:

Picture(systemName: "home")
    .font(.largeTitle)
    .imageScale(.massive)

In UIKit that is finished with one other image configuration, this time utilizing its scale initializer:

let config = UIImage.SymbolConfiguration(scale: .massive)
let picture = UIImage(systemName: "home", withConfiguration: config)

And once more you’ll be able to present each a customized font and a scale:

let config = UIImage.SymbolConfiguration(textStyle: .largeTitle, scale: .massive)
let picture = UIImage(systemName: "home", withConfiguration: config)

Tips on how to make SF Symbols daring by adjusting their weight

All SF Symbols can be found in all font weights, from extremely mild to black, which suggests you can also make them stand out or in any other case with little or no work.

In SwiftUI you alter the burden of an SF Image like this:

Picture(systemName: "keyboard")
    .font(.largeTitle.weight(.black))

In UIKit, alter the burden is completed by creating two cases of UIImage.SymbolConfiguration then combining them collectively:

let largeTitle = UIImage.SymbolConfiguration(textStyle: .largeTitle)
let black = UIImage.SymbolConfiguration(weight: .black)
let mixed = largeTitle.making use of(black)
let picture = UIImage(systemName: "keyboard", withConfiguration: mixed)

Tips on how to change the colour of an SF Image

SF Symbols render in a default coloration relying on which structure system you’re utilizing – SwiftUI makes use of the default font coloration, whereas UIKit makes use of the default tint coloration. Both method, you’ll be able to customise the icon’s coloration in quite a lot of methods.

To finish recolor an SF Image utilizing SwiftUI – i.e., to alter all components of it to at least one coloration – use the foregroundColor() modifier like this:

Picture(systemName: "doc")
    .foregroundColor(.purple)

In UIKit you’ve two choices: both change the tint coloration of the picture view you’re inserting the image in:

let picture = UIImage(systemName: "doc")
let imageView = UIImageView(picture: picture)
imageView.tintColor = .systemRed

Alternatively, alter the UIImage itself in order that it’s recolored in every single place:

let picture = UIImage(systemName: "doc")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal)
let imageView = UIImageView(picture: picture)

Tips on how to render hierarchical SF Symbols

In iOS 15 and later many SF Symbols icons comprise a number of layers that characterize depth within the icon, and these could be rendered with somewhat transparency to assist make the icon’s which means stand out. This works even when recolor the picture – you’ll simply various shades of your coloration because of the transparency.

In SwiftUI you’ll be able to render a hierarchical SF Image like this:

Picture(systemName: "sq..stack.3d.down.proper.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundColor(.indigo)

In UIKit, that is finished by specifying a hierarchical coloration as a part of your configuration, like this:

let config = UIImage.SymbolConfiguration(hierarchicalColor: .systemIndigo)
let picture = UIImage(systemName: "sq..stack.3d.down.proper.fill", withConfiguration: config)

Tips on how to render multicolor SF Symbols

In iOS 14 and later many SF Symbols have built-in colours that carry particular which means, equivalent to “externaldrive.badge.plus” – by exterior drive makes use of the default coloration, however the plus badge is inexperienced. This multicolor drawing mode isn’t enabled by default, so your symbols will render within the colours mentioned above, however you’ll be able to allow the default multicolor mode if you’d like.

In SwiftUI, you allow multicolor SF Symbols like this for iOS 15 or later:

Picture(systemName: "externaldrive.badge.plus")
    .symbolRenderingMode(.multicolor)

Or with this for iOS 14:

Picture(systemName: "externaldrive.badge.plus")
    .renderingMode(.unique)

In UIKit that is finished utilizing configurationPreferringMulticolor(), like this:

let config =  UIImage.SymbolConfiguration.configurationPreferringMulticolor()
let picture = UIImage(systemName: "externaldrive.badge.plus", withConfiguration: config)

Tip: Pictures that don’t have a multicolor variant will routinely be rendered monochrome, as should you hadn’t modified the setting.

Tips on how to create a customized SF Symbols palette

In iOS 15 and later many SF Symbols are divided into segments that help two and even three colours. How they’re rendered will depend on what number of segments they comprise and what number of colours you present:

• If they’ve 1 section, it’ll at all times use the primary coloration you specify; additional colours are ignored.
• If they’ve 2 segments and also you specify 1 coloration, that shall be used for each segments. When you specify 2 colours, one shall be used for every section. When you specify 3 colours, the third one is ignored.
• If they’ve 3 segments and also you specify 1 coloration, that shall be used for all three segments. When you specify 2 colours, one shall be used for the primary section, and the opposite coloration for the remaining two segments. When you specify 3 colours, one shall be used for every section.

In SwiftUI you’ll be able to render a palette picture by utilizing the .palette rendering mode adopted by a foreground fashion containing one, two, or three colours:

Picture(systemName: "individual.3.sequence.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.purple, .inexperienced, .blue)

You may truly use any type of ShapeStyle as a substitute of simply colours, which means that you could possibly use three totally different supplies:

Picture(systemName: "individual.3.sequence.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(
        .ultraThickMaterial,
        .regularMaterial,
        .ultraThinMaterial
    )

And even three linear gradients:

Picture(systemName: "individual.3.sequence.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(
        .linearGradient(colours: [.red, .black], startPoint: .high, endPoint: .bottomTrailing),
        .linearGradient(colours: [.green, .black], startPoint: .high, endPoint: .bottomTrailing),
        .linearGradient(colours: [.blue, .black], startPoint: .high, endPoint: .bottomTrailing)
    )
    .font(.largeTitle)

In UIKit that is finished utilizing one other image configuration, this time passing in an array of colours to the paletteColors initializer:

let config = UIImage.SymbolConfiguration(paletteColors: [.systemRed, .systemGreen, .systemBlue])
let picture = UIImage(systemName: "individual.3.sequence.fill", withConfiguration: config)

UIKit just isn’t ready to make use of supplies or gradients in its palette, solely colours.

Tips on how to alter SF Image variants

In iOS 15 and later some SF Symbols are supplied with quite a lot of variants, specifically a number of of circle, fill, rectangle, slash, or sq.. In UIKit you could activate these by identify – e.g. “bell.slash” – however in SwiftUI there’s a symbolVariant() modifier that makes this simpler.

For instance, this renders a bell icon with a slash by it:

Picture(systemName: "bell")
    .symbolVariant(.slash)

And this surrounds the bell with a sq.:

Picture(systemName: "bell")
    .symbolVariant(.sq.)

These could be mixed should you want them, like this:

Picture(systemName: "bell")
    .symbolVariant(.fill.slash)

There may be additionally a .none possibility that renders the unique picture, which is useful if you could transfer between two states of the icon. For instance, this flips a toggle between two states

struct ContentView: View 
    @State personal var showingAlerts = true

    var physique: some View 
        Toggle(isOn: $showingAlerts) 
            Label("Present Alerts", systemImage: "bell")
                .symbolVariant(showingAlerts ? .none : .slash)
        
        .toggleStyle(.button)
    

Tips on how to describe SF Symbols for VoiceOver

Many SF Symbols have helpful VoiceOver labels by default, equivalent to “coronary heart” being learn out as “love” and “calendar.badge.plus” being learn as “add to calendar.” Nevertheless, many different icons don’t have such built-in names, together with advanced icons equivalent to “arrowshape.flip.up.backward.circle”. In these circumstances it’s best to set a customized accessibility label describing the content material for VoiceOver.

In SwiftUI, you connect a customized accessibility label to an SF Image like this:

Picture(systemName: "arrowshape.flip.up.backward.circle")
    .accessibilityLabel("Return")

When you’re utilizing a label, VoiceOver will use your label’s textual content even when it isn’t at the moment being displayed.

Tip: You may also place your accessibility label into your Localizable.strings file utilizing the identical identify because the SF Image, and SwiftUI will use that as a substitute.

In UIKit the accessibility label is ready on the management that presents the image, like this:

let picture = UIImage(systemName: "arrowshape.flip.up.backward.circle")
let imageView = UIImageView(picture: picture)
imageView.accessibilityLabel = "Return"

Tips on how to make SF Symbols adapt to their context

In iOS 15 and later many SF Symbols routinely adapt to how they’re used, together with the way in which the “signature” image adjustments to match numerous localizations equivalent to Japanese or Hebrew.

Nevertheless, SwiftUI has one energy function that UIKit lacks, which is the flexibility to render SF Symbols in keeping with their context. That is most vital inside TabView, the place the right variant of a logo is system-dependent: on iOS Apple’s human interface tips advocate crammed icons, whereas on macOS they advocate utilizing strokes as a substitute.

SwiftUI does one thing intelligent right here: should you use an SF Image for a tab merchandise, you shouldn’t specify whether or not it’s crammed or not – it’ll routinely adapt primarily based on the system.

So, this may create a tab merchandise utilizing a crammed individual image on iOS, however a stroked individual on macOS:

TabView 
    Textual content("Your View Right here")
        .tabItem 
            Label("Residence", systemImage: "individual")
                .symbolVariant(.none)
        

What subsequent?

SF Symbols began huge and has by some means grown much more yearly – not solely are we getting growing numbers of symbols, however they’re getting extra spectacular and extra context conscious too.

The truth that SF Symbols is already the usual method to make use of iconography in your apps exhibits simply how highly effective, versatile, and helpful it’s, and hopefully you’ll discover they match proper into your personal initiatives!

Sponsor Hacking with Swift and reach the world’s largest Swift community!