# HIG: Icons & SF Symbols

Source: [Apple HIG — App Icons](https://developer.apple.com/design/human-interface-guidelines/app-icons) | [Icons](https://developer.apple.com/design/human-interface-guidelines/icons) | [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/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` |