Labels — HIG Playground

Explore iOS Label icon and text combination styles interactively. Change properties in the control panel to see them reflected on the iPhone screen instantly.

9:41

●●●● WiFi 🔋

Labels

Items

★

Favorites

↓

Downloads

⚙

Settings

✉

Messages

📅

Calendar

📷

Photos

⚠️ HIG Violation: Labels cause confusion

📚 HIG Guidelines — Try It Yourself

✓ Do — Good Example

✗ Don't — Bad Example

✓ Do This

Pair icons with text for clarity
Use SF Symbols for consistent iconography
Use semantic label styles (.titleAndIcon, .titleOnly, .iconOnly)
Ensure icons and text are visually aligned

✗ Don't Do This

Don't use ambiguous icons without text labels
Don't mix icon styles (SF Symbols with custom icons)
Don't use too many colors in label icons
Don't make labels too complex with multiple lines

👆 See the bad pattern in the iPhone preview above

Icon Position

Leading

Trailing

Size

Small

Regular

Large

Color

SwiftUI Code

Label("Favorites", systemImage: "star.fill") .labelStyle(.titleAndIcon) .font(.body) .foregroundStyle(.blue)