ios-sf-symbols-and-icons

name	ios-sf-symbols-and-icons
description	SF Symbols usage (weights, scales, the four rendering modes, fill-vs-outline variants, animations, SF Symbols 7 gradients/Draw + SF Symbols 8, accessibility labels, version-gating) and iOS 26/27 app icons (layered Liquid Glass design, Icon Composer + Icon Composer 2 refraction, square-unmasked layers, the six appearances, specs) per Apple HIG. Use when picking icons, choosing rendering modes, or producing an app icon for a native iOS app.
tags	["ios","sf-symbols","icons","app-icon","icon-composer","hig","apple"]

SF Symbols & app icons — iOS 26 / iOS 27

Source: Apple HIG SF Symbols + App icons pages + What's new in SF Symbols 8 (WWDC 2026); SF Symbols 8 & Icon Composer 2 betas June 12 2026 (read June 2026; App-icons change log June 8 2026). iOS 26 = shipping baseline; iOS 27 (WWDC 2026) = current cycle. Symbol library = SF Symbols 8 (iOS 27 era), built on the SF Symbols 7 rendering/animation feature set.

1. SF Symbols — the system icon library

Thousands of symbols that align automatically with San Francisco text at every weight/size. Availability is version-gated — a symbol added in a given year isn't on earlier OSes; check before using newer symbols.

• Don't use SF Symbols (or look-alikes) in app icons, logos, or trademarked use.

Weights (9): Ultralight → Black, each matching an SF font weight — match a symbol's weight to adjacent text. (Per typography rules, avoid the thin end.)

Scales (3), relative to cap height: Small, Medium (default), Large — SwiftUI .imageScale(.small/.medium/.large).

Rendering modes (4):

• Monochrome — one color to all layers.
• Hierarchical — one color, varying opacity per layer (depth).
• Palette — two+ explicit colors, one per layer.
• Multicolor — intrinsic meaningful colors (leaf green, trash.slash red).
• .automatic picks the symbol's preferred mode — but verify legibility. Prefer system colors so symbols keep adapting to dark mode / vibrancy / accessibility.

Variants: outline (most common); fill = more emphasis — iOS tab bars + swipe actions prefer fill, toolbars take outline; slash; enclosed (circle/square — better at small sizes). Script-specific variants adapt to device language automatically.

SF Symbols 7 (iOS-26 era): gradients (smooth linear gradient from one source color, all modes, best at larger sizes) and Draw On/Off animation. Variable color maps layer coloring to a 0–100% value (capacity/strength/progress) — use for change, not depth (use Hierarchical for depth).

SF Symbols 8 (iOS-27 era): the iOS 27 baseline library — 7,000+ symbols, with multiple new symbols added across iOS/iPadOS/macOS/watchOS/tvOS/visionOS 27. The four rendering modes, the SF Symbols 7 gradients/Draw/Variable-color features, and the animation set are unchanged — SF Symbols 8 is a content + new-glass-icon release, not a new symbol-rendering API. The new glass refraction/specular work lives in Icon Composer 2 for app icons (§2), not in symbol rendering modes. (Verify-at-source: confirm any newly added symbol's availability before use — newly added symbols are iOS-27-only and version-gate against iOS 26.)

Animations (all symbols/modes/weights): Appear, Disappear, Bounce, Scale, Pulse, Variable Color, Replace, Magic Replace (new default), Wiggle, Breathe, Rotate, Draw On/Off. Apply judiciously — too many overwhelm.

Accessibility: always provide an alternative text label (accessibility description) for VoiceOver. Custom symbols must stay consistent with system symbols (detail, optical weight, alignment) and be Simple/Recognizable/Inclusive.

2. App icons — iOS 26/27 layered + Liquid Glass

iOS/iPadOS/macOS/watchOS icons are layered (a background layer + one or more foreground layers); the system applies Liquid Glass attributes (specular highlights, refraction, translucency) that adapt with size and across OS versions. iOS 27 pushes this further: a more-dimensional, almost-3D layered effect (debuted on the redesigned Apple Maps icon), sharper/calmer glyphs, and selectively-applied refraction for added character. (Verify-at-source: the iOS-26 per-tilt shimmer/parallax motion is reported removed in iOS 27 for a calmer Home Screen — confirm against the live HIG before relying on it.)

• Build with Icon Composer (in Xcode 26 / Apple Developer site): define background, place foreground layers, apply glass, annotate default / dark / mono variants, preview, export.
• Icon Composer 2 (beta June 12 2026, iOS 27 cycle) adds: building icons from multiple layers of Liquid Glass; a Refraction annotation (bend light through the icon — layers pick up and transmit color/shape from what's behind them, dialed in per layer) and content-effect controls; crisp specular highlights per layer; and an interactive preview across this-year and last-year OS so one icon reads well on both iOS 26 and iOS 27. (App-icon glass refraction belongs here, not in SF Symbols rendering modes — cross-ref ios-app-icon-and-app-store.)
• Provide square, UNMASKED layers — the system masks. iOS/iPadOS/macOS → square layer, system applies the rounded-rectangle "concentric" mask matching the device bezel. Don't pre-mask or pre-round — it breaks specular highlights and looks jagged.

Specs: iOS/iPadOS/macOS layout = 1024×1024 px, square, layered, masked to a rounded rectangle.

Six appearances (iOS/iPadOS/macOS): default, dark, clear (light + dark), tinted (light + dark). The system auto-generates any you don't provide; keep core visual features consistent across all. Base dark on the light icon with complementary colors; colored backgrounds give best dark-icon contrast. Alternate icons each need their own variants and pass App Review.

Design rules: embrace simplicity / minimal shapes; consider filled, overlapping shapes with transparency for depth; prefer vector (SVG/PDF) layers, PNG for mesh gradients; let the system add highlights/shadows/blurs/glows — don't bake them in; full-bleed opaque background; include text only when essential (no localization/accessibility, often redundant); prefer illustration over photos; don't replicate Apple hardware or standard UI components.

3. Greg application

• Tab bar uses filled SF Symbols; toolbar uses outline. Match symbol weight to nearby label weight.
• Use monochrome + tangerine tint for primary-action symbols; reserve multicolor/variable color for nutrition/progress meaning (e.g., variable color on a "remaining calories" ring symbol communicates fill state).
• Every icon-only control needs an accessibility label.
• For the app icon: design a simple layered mark (square, unmasked), let Icon Composer apply glass + generate dark/tinted variants — don't ship a pre-rounded flat PNG.

Pairs with: ios-color-and-materials (rendering color), ios-typography (weight matching), ios-components (where fill vs outline applies).