axiom-sf-symbols

SF Symbols — エフェクト、レンダリング、カスタムシンボル

このスキルを使用する場面

次の場合に使用します：

• レンダリングモード（Monochrome、Hierarchical、Palette、Multicolor）を選択するとき
• シンボルのエフェクトやアニメーション（Bounce、Pulse、Scale、Wiggle、Rotate、Breathe、Draw）を実装するとき
• SF Symbols 7 の Draw On/Off アニメーションを使用するとき
• SF Symbols アプリでカスタムシンボルを作成するとき
• シンボルの色、エフェクトが再生されない問題、ウェイトの不一致を解決するとき
• 特定の UX 目的に合うエフェクトを選ぶとき
• シンボルのアニメーションに関するアクセシビリティ（Reduce Motion）に対応するとき

関連スキル

• すべてのモディファイア、UIKit の同等機能、プラットフォームの対応状況一覧を含む完全な API リファレンスには axiom-sf-symbols-ref を使用します
• 一般的な SwiftUI アニメーション（シンボル固有ではありません）には axiom-swiftui-animation-ref を使用します
• より幅広いアイコンデザインのガイドラインには axiom-hig-ref を使用します

プロンプトの例

1. 「SF Symbol が単色で表示されますが、複数の色合いで奥行きを出したいです。どうすればよいですか？」

このスキルではレンダリングモードの選択について説明します。単色から奥行きを出すには Hierarchical、レイヤーごとに色を明示的に指定するには Palette を使用します

2. 「ダウンロードボタンをタップしたときにアニメーションさせ、ダウンロード中は回転するインジケーターを表示し、完了したらチェックマークにアニメーションで切り替えたいです。」

このスキルでは、エフェクトの選択について説明します。タップ時のフィードバックには Bounce、処理中には Breathe/Pulse、完了時にはコンテンツトランジションを伴う Replace を使用します

3. 「SF Symbols 7 の新しい Draw アニメーションを使おうとしていますが、エフェクトが再生されません。」

このスキルでは、Draw On/Off の実装、再生モード、iOS 26 の要件、よくあるトラブルシューティングについて説明します

4. 「すべてのレンダリングモードと新しい Draw アニメーションに対応したカスタムシンボルは、どのように作成できますか？」

このスキルでは、カスタムシンボルの作成ワークフロー、テンプレートレイヤー、ガイドポイントを使った Draw の注釈付けについて説明します

---

パート 1：レンダリングモードの判断ツリー

SF Symbols は 4 種類のレンダリングモードに対応しています。適切な選択は、デザインの意図によって異なります。

すばやく判断する

Need depth from ONE color?           → Hierarchical
Need specific colors per layer?      → Palette
Want Apple's curated colors?         → Multicolor
Just need a tinted icon?             → Monochrome (default)

Monochrome

デフォルトのモードです。すべてのレイヤーが同じ色（foregroundStyle の色）でレンダリングされます。

Image(systemName: "cloud.rain.fill")
    .foregroundStyle(.blue)
// All layers are blue

使用する場面：シンプルな色付きアイコン、テキストと色を合わせる場合、ツールバー項目、タブバー項目。

Hierarchical

単一の色から派生した異なる不透明度でレイヤーをレンダリングします。プライマリレイヤーは完全に不透明になり、セカンダリレイヤーとターシャリレイヤーは段階的に透明度が高くなります。複数の色を指定せずに奥行きを作り出せます。

Image(systemName: "cloud.rain.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)
// Cloud is full blue, rain drops are lighter blue

使用する場面：視覚的な奥行きを加えながら、アイコンを単一の色相で統一したい場合。洗練された UI で最もよく選ばれます。

Palette

各レイヤーに明示的な色を指定します。Hierarchical と異なり、不透明度は自動的に派生しません。各レイヤーの色を直接制御します。

Image(systemName: "cloud.rain.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.blue, .cyan)
// Cloud is blue, rain drops are cyan

使用する場面：ブランドアイコン、特定の色に意味を持たせるステータスインジケーター、色を正確に制御する必要があるデザイン。

注意点：レイヤー数より少ない色を指定すると、余ったレイヤーには最後の色が再利用されます。シンボルに 3 つのレイヤーがあり、色を 2 つ指定した場合、3 つ目のレイヤーには 2 つ目の色が使われます。

Multicolor

各シンボルに対して Apple が定義した配色を使用します。色は固定されており、カスタマイズできません。

Image(systemName: "cloud.rain.fill")
    .symbolRenderingMode(.multicolor)
// Cloud is white, rain drops are blue (Apple's design)

使用する場面：天気を示すインジケーター、ファイルタイプのアイコン、または Apple が意図したデザインが要件に合う場面。すべてのシンボルが Multicolor に対応しているわけではありません。対応していないシンボルは Monochrome にフォールバックします。

よくある間違い

間違い	影響	修正方法
Multicolor に .foregroundColor() を使用する	Apple の色が上書きされます	foreground color モディファイアを削除します
Palette に色を 1 つだけ設定する	Monochrome のように見えます	各レイヤーに色を指定します
すべてのシンボルが Multicolor に対応していると思い込む	Monochrome にフォールバックします	まず SF Symbols アプリで確認します
レイヤーごとに異なる意味が必要なのに Hierarchical を使用する	色に意味を持たせられません	代わりに Palette を使用します

---

パート 2：シンボルエフェクトシステム

シンボルエフェクトを使うと、動きを加えて SF Symbols に命を吹き込めます。すべてのエフェクトは、動作に基づいて 4 つのカテゴリに分類されます。

エフェクトのカテゴリ

カテゴリ	トリガー	継続時間	使用例
離散	値の変更	1 回のみ	タップ時のフィードバック、イベント通知
継続	isActive の bool 値	停止するまで継続	読み込み状態、進行中の処理
トランジション	ビューの挿入／削除	1 回のみ	スタイルを指定した表示／非表示
コンテンツトランジション	シンボルの切り替え	1 回のみ	あるシンボルから別のシンボルへの置き換え

UX の目的に応じたエフェクトの選び方

User tapped something               → Bounce (discrete)
Something changed, draw attention    → Wiggle (discrete, iOS 18+)
Ongoing process/loading              → Pulse, Breathe, or Variable Color (indefinite)
Rotation indicates progress          → Rotate (indefinite, iOS 18+)
Show/hide symbol                     → Appear/Disappear (transition)
Swap between two symbols             → Replace (content transition)
Symbol enters with hand-drawn style  → Draw On (iOS 26+)
Symbol exits with hand-drawn style   → Draw Off (iOS 26+)
Progress indicator along path        → Variable Draw (iOS 26+)
Scale up/down for emphasis           → Scale (indefinite)

離散エフェクト

値が変わると 1 回だけ実行されます。シンボルはアニメーションを実行した後、元の状態に戻ります。

バウンス

最も一般的な離散エフェクトです。短く、弾むようなアニメーションを実行します。

@State private var downloadCount = 0

Image(systemName: "arrow.down.circle")
    .symbolEffect(.bounce, value: downloadCount)

downloadCount が変わるたびにアニメーションがトリガーされます。

方向のオプション：.bounce.up、.bounce.down

ウィグル（iOS 18+）

シンボルに注目を集める、水平方向の揺れです。

Image(systemName: "bell.fill")
    .symbolEffect(.wiggle, value: notificationCount)

方向のオプション：.wiggle.left、.wiggle.right、.wiggle.forward、.wiggle.backward

.forward と .backward は読み取り方向に対応します。RTL をサポートする場合に使用してください。

回転（離散として使用、iOS 18+）

値の変更によってトリガーされると、1 回だけ回転します。

Image(systemName: "arrow.trianglehead.2.clockwise")
    .symbolEffect(.rotate, value: refreshCount)

オプション：.rotate.clockwise、.rotate.counterClockwise

レイヤー単位：ファンの羽根は回転しても筐体は固定されたままなど、一部のシンボルは特定のレイヤーのみが回転します。これを有効にするには、.rotate.byLayer を使用します。

継続エフェクト

isActive が true の間、継続して実行されます。isActive が false になると停止します。

パルス

控えめな不透明度のパルスです。「待機中」の状態に適しています。

Image(systemName: "network")
    .symbolEffect(.pulse, isActive: isConnecting)

バリアブルカラー

シンボルのレイヤーを順番に切り替えて、それぞれを強調表示します。「塗りつぶし」や「循環」のような見た目になります。

Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative, isActive: isSearching)

バリエーション：

• .variableColor.iterative — 一度に 1 つのレイヤーを強調表示します
• .variableColor.cumulative — レイヤーを徐々に塗りつぶします
• .variableColor.reversing — 往復して切り替えます
• 組み合わせ：.variableColor.iterative.reversing

スケール

シンボルを拡大または縮小します。

Image(systemName: "mic.fill")
    .symbolEffect(.scale.up, isActive: isRecording)

ブリーズ（iOS 18+）

シンボルが呼吸しているかのような、滑らかでリズミカルなスケールアニメーションです。

Image(systemName: "heart.fill")
    .symbolEffect(.breathe, isActive: isMonitoring)

バリエーション：.breathe.plain（スケールのみ）、.breathe.pulse（スケール＋不透明度）

回転（継続として使用、iOS 18+）

処理中のインジケーターに使える、連続回転です。

Image(systemName: "gear")
    .symbolEffect(.rotate, isActive: isProcessing)

エフェクトのオプション

すべてのエフェクトで、options パラメーターを介して SymbolEffectOptions を指定できます。

// Repeat 3 times
.symbolEffect(.bounce, options: .repeat(3), value: count)

// Double speed
.symbolEffect(.pulse, options: .speed(2.0), isActive: true)

// Repeat continuously
.symbolEffect(.variableColor, options: .repeat(.continuous), isActive: true)

// Non-repeating (run once)
.symbolEffect(.breathe, options: .nonRepeating, isActive: true)

// Combine options
.symbolEffect(.bounce, options: .repeat(5).speed(1.5), value: count)

トランジションエフェクト

シンボルベースのビューがビュー階層に表示されたり、ビュー階層から消えたりするときに使用します。

if showSymbol {
    Image(systemName: "checkmark.circle.fill")
        .transition(.symbolEffect(.appear))
}

使用可能なトランジション：.appear、.disappear

バリエーション：.appear.up、.appear.down、.disappear.up、.disappear.down

コンテンツトランジション

あるシンボルから別のシンボルへのアニメーションに使用します。シンボルではなく、コンテナーに適用します。

@State private var isFavorite = false

Button {
    isFavorite.toggle()
} label: {
    Image(systemName: isFavorite ? "star.fill" : "star")
        .contentTransition(.symbolEffect(.replace))
}

置き換えのバリエーション：

• .replace.downUp — 古いシンボルは下に移動し、新しいシンボルは上に移動します
• .replace.upUp — 両方とも上に移動します
• .replace.offUp — 古いシンボルはフェードアウトし、新しいシンボルは上に移動します

マジック置き換え

star と star.fill、または pause.fill と play.fill のように、2 つのシンボルが共通の構造を持つ場合、Replace は自動的にマジック置き換えを実行します。共通する要素をモーフィングしながら、異なる部分を切り替えます。iOS 18+ では、.replace のデフォルトの動作がマジック置き換えです。明示的に制御するには、次のようにします。

// Explicit Magic Replace with fallback
.contentTransition(.symbolEffect(.replace.magic(fallback: .replace.downUp)))

---

パート 3：SF Symbols 7 — ドローアニメーション（iOS 26+）

ドローアニメーションは、ペンでシンボルを描く自然な動きを再現します。これは SF Symbols 7 の目玉となる新機能です。

描画と消去

描画は、線を 1 本ずつ「描く」ことでシンボルが表示されるアニメーションです。 消去は、シンボルを「消す」ことで非表示にするアニメーションです。

// Draw On — symbol draws in when isComplete becomes true
Image(systemName: "checkmark.circle")
    .symbolEffect(.drawOn, isActive: isComplete)

// Draw Off — symbol draws out when isHidden becomes true
Image(systemName: "star.fill")
    .symbolEffect(.drawOff, isActive: isHidden)

再生モード

複数レイヤーのシンボルの描画アニメーションを制御します。

// By Layer (default) — staggered timing, layers overlap
Image(systemName: "square.and.arrow.up")
    .symbolEffect(.drawOn.byLayer, isActive: showIcon)

// Whole Symbol — all layers draw simultaneously
Image(systemName: "square.and.arrow.up")
    .symbolEffect(.drawOn.wholeSymbol, isActive: showIcon)

// Individually — sequential, each layer completes before next starts
Image(systemName: "square.and.arrow.up")
    .symbolEffect(.drawOn.individually, isActive: showIcon)

各モードの使いどころ：

• By Layer（デフォルト）：最も自然な印象で、ほとんどのシンボルに適しています
• Whole Symbol：シンボルを部分ごとではなく、ひとまとまりとして表示する場合に適しています
• Individually：各レイヤーを個別に強調したい場合に適しています（ストーリーテリング、オンボーディングなど）

描画解除の方向

Draw Off では、アニメーションを順方向または逆方向に再生するかを制御できます。

// Forward (default) — follows the draw path
.symbolEffect(.drawOff.nonReversed, isActive: isHidden)

// Reversed — erases in reverse order of how it was drawn
.symbolEffect(.drawOff.reversed, isActive: isErasing)

可変描画

Variable Draw は SymbolVariableValueMode.draw を使用して、0.0 から 1.0 の値に基づきシンボルのストロークパスを部分的に描画します。進行状況インジケーターに最適です。

Image(systemName: "thermometer.high", variableValue: temperature)
    .symbolVariableValueMode(.draw) // iOS 26+

レイヤーごとに不透明度を設定する従来の Variable Color と比較してください。

Image(systemName: "wifi", variableValue: signalStrength)
    .symbolVariableValueMode(.color) // iOS 17+ (default behavior)

制約：シンボルは Variable Color と Variable Draw の両方をサポートできますが、描画時に有効にできるモードは一度に 1 つだけです。サポートされていないモードを設定しても、表示上の効果はありません。

グラデーション描画

SF Symbols 7 では、単一のソースカラーから生成されるグラデーション塗りつぶしのために SymbolColorRenderingMode が導入されました。

Image(systemName: "star.fill")
    .symbolColorRenderingMode(.gradient) // iOS 26+
    .foregroundStyle(.red)

モード	説明
.flat	単色で塗りつぶします（デフォルト）
.gradient	ソースカラーから軸方向のグラデーションを適用します

グラデーションはすべての描画モードで機能し、大きなサイズで最も効果を発揮します。

Draw による Magic Replace

特定のシンボルペア間で .contentTransition(.symbolEffect(.replace)) を使用すると、システムは出ていくシンボルの Draw Off と、入ってくるシンボルの Draw On を組み合わせるようになりました。共有されている場合（円形の輪郭など）、囲み部分はそのまま維持され、内側の要素が描画アニメーションで切り替わります。

// Automatic Draw-enhanced Magic Replace
Image(systemName: isComplete ? "checkmark.circle.fill" : "circle")
    .contentTransition(.symbolEffect(.replace))

カスタムシンボルの描画アノテーション

カスタムシンボルで Draw アニメーションを有効にするには、SF Symbols アプリでパスにアノテーションを付けます。

1. SF Symbols 7 でカスタムシンボルを開きます
2. パスレイヤーを選択します
3. 描画方向を定義するためにガイドポイントを追加します：
   • 開始点（開いた円）：描画を開始する位置
   • 終了点（閉じた円）：描画を終了する位置
   • コーナーポイント（ひし形）：鋭い方向転換を示します
   • 双方向ポイント：中央から外側への描画を有効にします
   • アタッチメントポイント：描画されない装飾要素を接続します
4. 最小数：パスごとに 2 つのガイドポイント（開始点と終了点）
5. SF Symbols アプリのプレビューパネルでテストします

Option キーを押しながらドラッグすると、ガイドポイントを正確に配置できます。コンテキストメニューを使用して、方向と終端形状を設定します。

---

パート 4：アンチパターン

不適切な描画モード

パターン	問題	修正方法
色が 1 色の Palette	Monochrome と同等で、API 呼び出しが無駄になります	Monochrome を使うか、複数の色を指定します
ブランドアイコンに Multicolor を使用	Apple が固定した色をカスタマイズできません	ブランドカラーを使った Palette を使用します
.foregroundColor(.blue) をハードコード	ダークモード、Dynamic Type、アクセシビリティに対応しません	セマンティックカラーを使って .foregroundStyle() を使用します
ステータスインジケーターに Hierarchical を使用	レイヤーに明確な意味がありません	セマンティックカラーを使った Palette を使用します

不適切なエフェクトの選択

パターン	問題	修正方法
読み込み状態に Bounce を使用	1 回限りで、「継続中」であることが伝わりません	Pulse、Breathe、または Variable Color を使用します
タップ時のフィードバックに Pulse を使用	アクションを確認するには控えめすぎます	Bounce を使用します
機械的でないシンボルに Continuous Rotate を使用	有機的な形状では不自然に見えます	有機的なシンボルには Breathe を使用します
一時的な状態変化に Draw On を使用	頻繁な切り替えには大げさすぎます	Replace または Scale を使用します

iOS バージョンチェックの欠如

// ❌ Crashes on iOS 17
Image(systemName: "bell")
    .symbolEffect(.wiggle, value: count) // Wiggle requires iOS 18+

// ✅ Safe version check
Image(systemName: "bell")
    .modifier(BellEffectModifier(count: count))

struct BellEffectModifier: ViewModifier {
    let count: Int
    func body(content: Content) -> some View {
        if #available(iOS 18, *) {
            content.symbolEffect(.wiggle, value: count)
        } else {
            content.symbolEffect(.bounce, value: count)
        }
    }
}

Reduce Motion の無視

シンボルエフェクトは Reduce Motion のアクセシビリティ設定を自動的に尊重します。ほとんどのエフェクトは抑制されるか、簡略化されます。ただし、装飾だけでなく、不可欠な情報を伝えるためにエフェクトを使用している場合は、代替手段を用意してください。

// Variable Color conveys WiFi strength — provide text fallback
Image(systemName: "wifi")
    .symbolEffect(.variableColor, isActive: isSearching)
    .accessibilityLabel("Searching for WiFi networks")

Reduce Motion を無効にしたり、エフェクトを強制的に再生したりしないでください。システムが適切に処理します。

アクセシビリティラベルの不足

// ❌ VoiceOver says "star.fill"
Image(systemName: "star.fill")

// ✅ VoiceOver says "Favorite"
Image(systemName: "star.fill")
    .accessibilityLabel("Favorite")

.contentTransition(.symbolEffect(.replace)) を使用してシンボルを切り替える場合は、現在の状態に合わせてアクセシビリティラベルを更新します。

Image(systemName: isFavorite ? "star.fill" : "star")
    .contentTransition(.symbolEffect(.replace))
    .accessibilityLabel(isFavorite ? "Remove from favorites" : "Add to favorites")

---

パート 5：トラブルシューティング

エフェクトが再生されない

症状：.symbolEffect() モディファイアを適用しても、アニメーションが表示されません。

1. iOS のバージョンを確認する — Bounce／Pulse／Scale には iOS 17 以降、Wiggle／Rotate／Breathe には iOS 18 以降、Draw には iOS 26 以降が必要です
2. 「視差効果を減らす」を確認する — 「設定」>「アクセシビリティ」>「動作」>「視差効果を減らす」を確認します。オンの場合、ほとんどのエフェクトが抑制されます
3. トリガーの種類を確認する — 離散エフェクトには、値が変化する value: が必要です。無期限エフェクトには isActive: true が必要です。トランジションエフェクトには、ビューが実際に階層に追加または階層から削除される必要があります
4. シンボルとの互換性を確認する — すべてのシンボルがすべてのエフェクトに対応しているわけではありません。SF Symbols アプリを開き、シンボルを選択して、「アニメーション」インスペクタを確認します
5. 競合するエフェクトがないか確認する — 同じビューに複数の .symbolEffect() モディファイアを適用すると、競合することがあります。エフェクトを 1 つだけ使用するか、オプションと組み合わせてください

レンダリングモードで色が正しく表示されない

症状：シンボルの色が想定した表示と異なります。

1. レンダリングモードを確認する — .foregroundStyle を設定しているのに色が 1 色しか表示されない場合は、.symbolRenderingMode(.palette) または .hierarchical が必要な可能性があります
2. .tint と .foregroundStyle の違いを確認する — UIKit では、tintColor は Monochrome と Hierarchical に影響します。Palette には UIImage.SymbolConfiguration(paletteColors:) を使用します
3. Multicolor に対応しているか確認する — すべてのシンボルに Multicolor バリアントがあるわけではありません。対応していないシンボルは Monochrome にフォールバックします
4. 環境を確認する — 親ビューの .foregroundStyle によって、設定したレンダリングモードが上書きされる場合があります。.symbolRenderingMode() は Image に直接適用します

カスタムシンボルのウェイトが一致しない

症状：テキストや他のシンボルの隣に置いたカスタムシンボルが、細すぎる、または太すぎます。

1. テンプレートのウェイトを確認する — カスタムシンボルには、9 種類の SF Pro ウェイトに対応したバリアントが必要です。SF Symbols アプリから書き出すと、この処理が行われます
2. .font() との整合性を確認する — シンボルのウェイトは、適用されているフォントのウェイトに従います。.font(.title) を使用する場合は、カスタムシンボルに適切なウェイトのバリアントがあることを確認します
3. スケールを確認する — .imageScale(.small/.medium/.large) は全体のサイズに影響します。ウェイトを合わせるには .font() を使用します

カスタムシンボルで Draw アニメーションが動作しない

症状：カスタムシンボルに .symbolEffect(.drawOn) を適用しても、描画アニメーションが実行されません。

1. ガイドポイントを確認する — カスタムシンボルには Draw アノテーションが必要です。また、各パスに少なくとも 2 つのガイドポイント（開始点と終了点）が必要です
2. SF Symbols アプリのバージョンを確認する — Draw アノテーションには SF Symbols 7 以降が必要です
3. パスの構造を確認する — ガイドポイントは塗りつぶしではなく、ストロークのパス上に配置する必要があります。描画アニメーションを使いたい塗りつぶしは、ストロークに変換します
4. レイヤーの構造を確認する — アノテーションを付ける各レイヤーには、それぞれ独自のガイドポイントが必要です

---

パート 6：プレッシャーのかかる状況

シナリオ 1：「静的な画像を使えばいい。シンボルは大げさです」

状況：デザイナーから PNG アイコンが提供されます。開発者は SF Symbols の代わりにそれらを使おうと考えています。

重要な理由：静的な PNG は Dynamic Type、太字テキスト、ダークモード、アクセシビリティ設定に適応しません。また、シンボルエフェクトにも対応していません。

プロフェッショナルな回答：「SF Symbols はテキストに合わせて拡大・縮小し、9 種類のウェイトに対応し、ダークモードや太字テキストにも自動的に適応するうえ、カスタムコードなしでアニメーションを利用できます。PNG を使うには、@1x／@2x／@3x のバリアント、ダークモードへの手動対応、Dynamic Type に合わせた手動の拡大・縮小、カスタムアニメーションコードが必要です。適切な SF Symbol を探す 10 分で、アセット管理にかかる何時間もの作業を省けます。」

省略した場合の時間コスト：アセット管理に 2～4 時間、その後も継続的なメンテナンスが必要になるのに対し、適切なシンボルを探す時間は 10 分です。

シナリオ 2：「アニメーションは後で追加します」

状況：スプリントの締め切りが迫っています。PM は、アニメーションは仕上げであり、後回しにできると言っています。

重要な理由：シンボルエフェクトを後から導入するには、状態管理を再構成する必要があります。value: の変更によってトリガーされるエフェクトには、最初から適切な状態アーキテクチャが必要です。

プロフェッショナルな対応：「.symbolEffect(.bounce, value: count) の追加は 1 行で済みます。後から対応できるように状態を作り直すには、リファクタリングが必要です。今、エフェクトを追加させてください。文字どおり、モディファイアを 1 つ追加するだけです。」

シナリオ 3：「カスタムシンボルの Draw アニメーションがぎこちなく見える」

状況：カスタムシンボルの Draw アニメーションの見え方がおかしく、パスが予想外の順序や方向で描画されます。

重要な理由：Draw アノテーションには、ガイドポイントを意図的に配置する必要があります。そうしないと、システムが推測しますが、多くの場合うまくいきません。

解決方法：SF Symbols 7 アプリでカスタムシンボルを開き、各パスに開始点、終了点、方向を定義するガイドポイントを明示的に追加します。各ウェイトのバリエーションをテストしてください。上記の「カスタムシンボルの Draw アノテーション」セクションを参照してください。

---

リソース

WWDC：2023-10257、2023-10258、2024-10188、2025-337

ドキュメント：/symbols、/symbols/symboleffect、/symbols/symbolrenderingmode、/swiftui/image/symboleffect(:options:value:)、/swiftui/image/symbolrenderingmode(:)

スキル：axiom-sf-symbols-ref、axiom-hig-ref、axiom-swiftui-animation-ref

---

最終更新 WWDC 2023/10257-10258、WWDC 2024/10188、WWDC 2025/337 に基づく バージョン iOS 17 以降（エフェクト）、iOS 18 以降（Wiggle／Rotate／Breathe）、iOS 26 以降（Draw On/Off、Variable Draw、グラデーション）