WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in SF Symbols 7

What's new in SF Symbols 7

SwiftUIDesign
Watch original video

Highlight

SF Symbols 7 introduces the Draw animation system, Variable Draw, enhanced Magic Replace, gradient rendering, and a guide points annotation workflow for custom symbols.

Core Content

Providing detailed feedback with in-app symbols has long put developers in a bind: use a static SF Symbol with no expressiveness, or draw SVG and write Lottie, turning every state transition and progress indicator into a custom animation. The result: icon bloat, inconsistent styles, and transitions that clash with the system. In this session, Apple designer Kelsey offers an answer: build drawing into SF Symbols itself.

SF Symbols 7 follows one thread: treat a symbol as something written stroke by stroke, not a fixed image. Draw animates symbols along their own paths, drawing and erasing (01:49); Variable Draw turns that path into a quantifiable progress bar; Magic Replace learns to recognize enclosures and preserve them, making transitions between two related symbols more fluid (06:03); gradient rendering applies uniformly across all rendering modes; and custom symbols plug into this whole system through guide points. All of this wraps into the familiar symbolEffect modifier and SymbolEffect types—upgrade your app with just a few lines of code.

Details

Draw animation system (01:49). Two new animation presets: Draw On draws a symbol onto the screen, Draw Off erases it. Existing playback options remain: By Layer (default, staggers start times across layers), Whole Symbol (all layers draw together); plus a new Individually option, drawing layers serially, waiting for each layer to finish before starting the next (03:08). Each symbol defines its own drawing direction: Latin text from left to right, Arabic from right to left, symmetric shapes from center outward (03:28). Compound shapes like arrows support moving the arrowhead along the path during drawing (03:56). Draw Off adds a reverse toggle, choosing whether to erase continuing in the original direction or opposite (04:35).

Variable Draw (04:48). It reuses Draw annotations but as a rendering preset: draw the path at a specified percentage, layered over a reduced-opacity full path below. Suited for visualizations that advance gradually: download progress, thermometers, yoga completion. A symbol can declare support for both Variable Color and Variable Draw, but rendering picks one; if unspecified, .default lets the system choose the symbol’s preferred mode (05:50).

Enhanced Magic Replace (06:03). Magic Replace now recognizes matching enclosures (shapes like boxes or circles), preserves them, and swaps only the differing interior. Draw also folds into Magic Replace: the outgoing symbol plays Draw Off, the incoming plays Draw On, combined with enclosure matching for the most continuous transition.

Gradient rendering (07:00). Generate a smooth linear gradient from a single source color, giving symbols depth with light and shadow. Works with system and custom colors, and stacks with any of monochrome, hierarchical, palette, and multicolor rendering modes; the effect intensifies at larger sizes.

Custom symbol annotation (08:05). Draw animation depends on guide points. A path needs at least 2 points: start (hollow circle), end (solid circle). Complex paths need points at corners; sharp turns should be marked as corner points (diamond indicator, linking two points on the same side, 17:38). Circles with multiple subpaths: placing the first guide point auto-detects it spans two subpaths and treats it as start + end; draws clockwise by default, switch to counterclockwise via right-click menu (14:13). Compound shapes with arrows: drag an arrow onto an existing guide point to create an attachment (non-drawing element that moves along the path, 15:11). Nine weights, three scales—annotate only regular, ultralight, and black, and the system interpolates the remaining six; guide point order must match across weights, enable guide point numbers to check (19:43).

API updates (20:51). Draw, Variable Draw, and Gradient plug into SwiftUI / UIKit / AppKit through existing entry points. SwiftUI triggers Draw On/Off:

Image(systemName: "trash")
    .symbolEffect(.drawOn, options: .speed(0.8), isActive: !isHidden)

Key points:

  • Image(systemName:): still a standard SF Symbol, no need to replace icon assets.
  • .symbolEffect(.drawOn, ...): uses the new drawOn preset; when isHidden toggles, the symbol first plays Draw Off then Draw On.
  • options:: like other symbol effects, can override the default By Layer to use Whole Symbol or Individually.

UIKit / AppKit trigger Draw:

imageView.addSymbolEffect(.drawOn)
imageView.addSymbolEffect(.drawOff)

Key points:

  • In UIKit / AppKit, Draw On and Draw Off are two separate addSymbolEffect calls, triggered on demand.
  • Uses existing API surfaces—no new view types required.

Enable Variable Draw rendering:

Image(systemName: "thermometer")
    .symbolVariableValueMode(.draw)
    .symbolEffect(.variableColor.iterative, value: progress)
    .imageScale(.large)

Key points:

  • .symbolVariableValueMode(.draw): tells the system to use Draw for the variable value, not Color; omit to use the symbol’s preferred default.
  • value: progress: passes progress (0–1) as the variable value, and the symbol draws the corresponding path at that percentage.

Enable gradient rendering:

// SwiftUI
Image(systemName: "heart.fill")
    .symbolColorRenderingMode(.gradient)

// UIKit / AppKit
let config = UIImage.SymbolConfiguration(colorRenderingMode: .gradient)
imageView.preferredSymbolConfiguration = config

Key points:

  • SwiftUI enables gradients via the .symbolColorRenderingMode(.gradient) modifier.
  • UIKit / AppKit configures via SymbolConfiguration(colorRenderingMode:); works stacked with any of monochrome, hierarchical, palette, multicolor.
  • The SF Symbols app Copy Code button copies code for the current preview state—no need to memorize parameters (22:01).

Key Takeaways

  • What to do: upgrade key state transitions to Draw + Magic Replace. Why it’s worth it: critical moments like checkmark completion, error receipts, guided steps gave weak feedback with plain fades, while custom animations fragment from the rest of the system; Draw + enclosure matching delivers brushstroke-like transitions consistent with the system, at zero art cost. How to start: list the 5 most-tapped icon changes in your app (like, favorite, play/pause, check, delete), swap them to .symbolEffect(.drawOn) with Magic Replace, and compare the feel one by one.

  • What to do: express progress-style UI with Variable Draw. Why it’s worth it: linear progress like download bars, thermometers, workout completion used to mean either a ProgressView or drawing your own ring; Variable Draw lets a single symbol carry both shape and progress semantics, cutting down on views. How to start: find an existing ProgressView, pick a system symbol that matches the meaning (like arrow.down.circle, thermometer), switch to Image(systemName:).symbolVariableValueMode(.draw) and feed progress 0–1 into value.

  • What to do: audit whether custom symbols need guide points added. Why it’s worth it: old custom SVG symbols lack guide points and can’t use Draw, Variable Draw, or Magic Replace; without them, upgrading to SF Symbols 7 fractures visual consistency. How to start: in SF Symbols app, duplicate the closest system symbol, delete its guide points and re-annotate to learn the rules, then fix your own custom symbol; annotate only regular / ultralight / black, and let the system interpolate the rest.

  • What to do: enable gradient rendering on large hero icons. Why it’s worth it: gradients show best at large sizes, giving settings headers, empty-state illustrations, and onboarding icons depth without new assets. How to start: find every SF Symbol usage at size ≥ 64pt in your app, add .symbolColorRenderingMode(.gradient) to each, leave smaller sizes unchanged.

Comments

GitHub Issues · utterances