SF Symbols offers thousands of consistent, highly configurable symbols that seamlessly integrate with the San Francisco system font, automatically aligning with text across all weights and sizes. You can use these symbols to convey objects or concepts wherever interface icons may appear, such as in navigation bars, toolbars, tab bars, context menus, and within text.
The availability of symbols and specific features varies depending on the system version you’re targeting. For example, if you include a symbol introduced in SF Symbols 3 within your app bundle, you can still use that symbol when your app runs on earlier platforms — such as iOS 13, Mac Catalyst 13, tvOS 13, or watchOS 6 — but without SF Symbols 3 features like Hierarchical or Palette color rendering.
Visit SF Symbols to download the app and explore the full set of symbols. Be sure to review the terms and conditions for using SF Symbols, which prohibit using symbols — or images that closely resemble them — in app icons, logos, or other trademark uses. For developer guidance, see Configuring and displaying symbol images in your UI.
Rendering Modes SF Symbols 3 and later provide four rendering modes — Monochrome, Hierarchical, Palette, and Multicolor — enabling various color application options for symbols. For example, you might use some of your app's accent color opacities to add depth and emphasis to symbols or define a contrasting color palette to display symbols that coordinate with different color schemes.
To support rendering modes, SF Symbols organizes symbol paths into different layers. For example, the cloud.sun.rain.fill symbol consists of three layers: the primary layer containing the cloud path, the secondary layer containing paths defining the sun and its rays, and the tertiary layer containing the raindrop paths.
Depending on the rendering mode you choose, a symbol can produce various appearances. For instance, Hierarchical rendering mode assigns different opacities to one color for each layer, creating a visual hierarchy that adds depth to the symbol.
How to Use
UIKit:
let heartImage = UIImage(systemName: "heart.fill")
SwiftUI:
let heartImage = Image(systemName: "heart.fill")