Files

T

Anthony Cardinale 34bd90e30d Initial release: swift-front skill with Apple HIG integration

Combines frontend-design aesthetics with swiftui-pro correctness,
grounded in Apple's Human Interface Guidelines (134 articles).

Includes curated HIG reference files for typography, color, layout,
materials, motion, icons, and components, plus full HIG JSON data
for deep lookups.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-25 07:52:07 -04:00

3.1 KiB

Raw Permalink Blame History

HIG: Icons & SF Symbols

Source: Apple HIG — App Icons | Icons | SF Symbols

App Icons

Layer Design

iOS/iPadOS/macOS/watchOS: background + foreground layers with Liquid Glass effects
tvOS: 2-5 layers for parallax
visionOS: background + 1-2 layers as 3D object

Key Rules

Embrace simplicity — simple icons are easiest to recognize
Keep primary content centered to avoid masking truncation
Prefer filled, overlapping shapes for depth
Include text only when essential to brand
Use illustrations, not photos or UI screenshots
Let the system handle visual effects (highlights, shadows, bevels)

Specifications

Platform	Shape	Size	Appearances
iOS/iPadOS/macOS	Rounded rect	1024x1024 px	Default, dark, clear, tinted
tvOS	Rounded rect	800x480 px	N/A
visionOS	Circular	1024x1024 px	N/A
watchOS	Circular	1088x1088 px	N/A

Interface Icons

Simple, recognizable, highly simplified designs
Consistent size, detail, stroke weight, perspective across all icons
Match icon weight to adjacent text weight
Use vector format (PDF/SVG) — scales automatically
Provide accessibility descriptions for custom icons

SF Symbols (6000+)

Rendering Modes

Mode	Description
Monochrome	One color for all layers
Hierarchical	One color, varying opacity per layer
Palette	Two or more colors, one per layer
Multicolor	Intrinsic colors (leaf=green, trash.slash=red)

Gradients (SF Symbols 7+)

Linear gradient from single color, all rendering modes, best at larger sizes.

Variable Color

Represents changing values (0-100%): layers receive color at thresholds. Use for change, NOT depth (use Hierarchical for depth).

Design Variants

Outline: Text-like (toolbars, lists)
Fill: Solid areas (tab bars, swipe actions, selection)
Slash: Unavailability
Enclosed: Circle/square (legibility at small sizes)

System views auto-select variant (tab bar -> fill, toolbar -> outline).

Animations

Animation	Use For
Appear/Disappear	Gradual show/hide
Bounce	Feedback that action occurred
Scale	Draw attention to selection
Pulse	Ongoing activity
Variable color	Progress, broadcasting
Replace/Magic Replace	Swap symbols with transitions
Wiggle	Highlight change or call to action
Breathe	Status changes, ongoing recording
Rotate	Progress indicators
Draw On/Off	Progress, direction (SF Symbols 7+)

Common Standard Symbols

Action	Symbol
Add	`plus`
Delete	`trash`
Share	`square.and.arrow.up`
Search	`magnifyingglass`
Done	`checkmark`
Cancel	`xmark`
Compose	`square.and.pencil`
More	`ellipsis`
Filter	`line.3.horizontal.decrease`
Account	`person.crop.circle`

3.1 KiB Raw Permalink Blame History