Foundations/Icons

Icon System

SwiftDS uses SF Symbols throughout navigation, actions, and semantic states. The package does not define a separate icon token file, so the conventions here are derived from package usage and the package-authored foundations guidance.

Sizing Guidance

★

small

Compact controls and dense supporting UI

16pt

★

medium

Default control and row icon size

20pt

★

large

Navigation items, headers, and prominent actions

24pt

★

xl

Hero treatments and feature highlights

32pt

Usage

Example
import SwiftUI

// Basic symbol usage
Image(systemName: "heart.fill")
    .foregroundStyle(DSColor.primary)

// Sized icon
Image(systemName: "star.fill")
    .font(.system(size: 20))
    .foregroundStyle(DSColor.accent)

// Symbol inside a SwiftDS control
Button {
    // action
} label: {
    Label("Save", systemImage: "checkmark.circle.fill")
}
.buttonStyle(.primary)

Symbols Seen In Package

chart.bar.fill

plus.circle.fill

person.badge.plus

gearshape.fill

magnifyingglass

house.fill

SF Symbols

Package showcase sources use SF Symbols because they inherit platform-consistent alignment, weight matching, and accessibility behavior across Apple platforms.

  • •Automatic alignment: Icons align with text baselines
  • •Variable color: Multi-color rendering support
  • •Weight matching: Icons match text weight automatically
  • •Accessibility: VoiceOver support built-in

Best Practices

  • •Prefer semantic symbol names that describe the action or state clearly
  • •Use filled variants for selected or active states, as seen in navigation and action demos
  • •Pair status icons with semantic colors such as `DSColor.success`, `warning`, `error`, and `info`
  • •Keep icon sizes aligned with nearby text and control density
  • •Provide accessibility labels for icon-only buttons and controls