SwiftUI Label と SF Symbols

Label で使用するアイコンには、Apple が提供する SF Symbols が便利です。5,000 以上のシンボルが用意されており、システムフォントと調和するデザインになっています。

SF Symbols の基本

systemImage: 引数でシンボル名を指定します。

Label("ダウンロード", systemImage: "arrow.down.circle")
Label("共有", systemImage: "square.and.arrow.up")
Label("削除", systemImage: "trash")

シンボルのバリエーション

多くのシンボルには複数のバリエーションがあります。

// 線画（デフォルト）
Label("ハート", systemImage: "heart")

// 塗りつぶし
Label("ハート", systemImage: "heart.fill")

// 円で囲む
Label("ハート", systemImage: "heart.circle")

// 円で囲んで塗りつぶし
Label("ハート", systemImage: "heart.circle.fill")

色の適用

foregroundStyle でアイコンとテキストの両方に色が適用されます。

Label("エラー", systemImage: "exclamationmark.triangle.fill")
    .foregroundStyle(.red)

シンボルだけに色を付ける

テキストとアイコンで別の色を使いたい場合は、Label を分解して書きます。

Label {
    Text("お気に入り")
        .foregroundStyle(.primary)
} icon: {
    Image(systemName: "star.fill")
        .foregroundStyle(.yellow)
}

マルチカラーシンボル

一部のシンボルはマルチカラーに対応しています。

Label("天気", systemImage: "cloud.sun.fill")
    .symbolRenderingMode(.multicolor)

シンボルのサイズ

Label に .font() を適用すると、アイコンのサイズも連動します。

Label("大きいラベル", systemImage: "star")
    .font(.largeTitle)

シンボルの探し方

SF Symbols アプリ（Apple が無料提供）をインストールすると、すべてのシンボルを検索・プレビューできます。アプリから直接シンボル名をコピーできるので、開発時に重宝します。