Anthony Cardinale
34bd90e30d
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>
92 lines
3.1 KiB
Markdown
92 lines
3.1 KiB
Markdown
# 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` |
|