17 人が閲覧(直近 30 日) モバイル(iOS・Android)

SF Symbolsとは|最新版27の入手方法と一覧の探し方・SwiftUIでの使い方と商用利用の範囲

SF Symbolsとは|最新版27の入手方法と一覧の探し方・SwiftUIでの使い方と商用利用の範囲

SF Symbolsは、AppleがiPhone・iPad・Mac・Apple Watch・Apple TV・Vision Pro向けアプリのために配布しているシンボル(アイコン)のライブラリです。公式ページの説明では7,000を超えるシンボルがあり、Appleのシステムフォント「San Francisco」と同じ太さと大きさの体系で設計されているため、文字の横に置いても高さと線の太さが揃います。

この記事では、2026年9月14日に更新された最新版SF Symbols 27の入手方法と動作要件、一覧からシンボルを探す手順、SwiftUI・UIKitでの表示とアニメーションのコード、カスタムシンボルの作り方、ライセンス上使えない場面を順に説明します。版ごとの追加数や動作要件は、SF Symbols 27.0(ビルド140)の配布パッケージにあるInfo.plistとname_availability.plistを確認した値です。アプリを起動しての動作検証値ではありません。

まとめ:SF Symbolsの最新版と使い方の要点

  • 最新版はSF Symbols 27。WWDC26(2026年6月8日)では「SF Symbols 8」の名前でベータ版が公開されましたが、現在のApple Design Resourcesの表記は「SF Symbols 27」で、配布アプリのバージョンも27.0です。
  • 入手はAppleの公式ページから無料。動くのはMacだけで、最新版のアプリはmacOS 15.4以降が必要です(公式ページの「macOS Sonoma以降」という表記は旧版の要件)。Windows版はありません。
  • 公式の一覧はMacアプリそのもの。32のカテゴリと意味で探せる検索があり、シンボルごとに使えるOSの下限が表示されます。
  • コードでは名前の文字列で呼び出す。SwiftUIはImage(systemName:)、UIKitはUIImage(systemName:)で、どちらもiOS 13以降で使えます。
  • 主な用途はAppleプラットフォーム向けアプリのUIと、そのモックアップ・紹介画像。アプリアイコンやロゴへの使用、Android・Windows向けUIでの使用、素材としての再配布はライセンスで禁止されています。

SF Symbolsの仕組みとSan Franciscoフォントとの関係

SF Symbolsのシンボルは、画像ファイルではなくフォントに近い仕組みで描かれます。9段階のウェイト(UltralightからBlackまで)と3段階のスケール(Small・Medium・Large)を持ち、隣に並ぶ文字のウェイトに合わせて線の太さが変わります。スケールはSan Franciscoの大文字の高さを基準に決まっているため、同じフォントサイズのまま、アイコンだけを一回り大きく見せられます。

「SF」はSan Franciscoの略です。インストーラを実行するとアプリ本体と一緒にSF ProとSF Compactのフォント一式(85ファイル)が/Library/Fontsに入ります。SF Symbolsアプリからシンボルをコピーしてデザインツールに貼り付けると文字として扱われるのは、このフォントの中にシンボルが入っているためです。

色の付け方は4種類のレンダリングモードで切り替えます。1色で塗る「モノクローム」、1色の濃淡で奥行きを出す「階層」、パーツごとに別の色を指定する「パレット」、Appleが決めた固有の色で描く「マルチカラー」です。配布パッケージのメタデータでは、マルチカラーに対応するシンボルが2,784個、値に応じて一部だけ色が付く「可変カラー」のカテゴリに入るシンボルが1,260個あります。

最新版SF Symbols 27の変更点と版ごとの追加数

SF Symbols 27(2026年9月)で変わった点

SF Symbols 27の公式ページでは、新しい要素として「進化した検索」が挙がっています。シンボル名と完全に一致しない言葉でも、意味の近いシンボルを候補に出す検索です。新しいシンボルはiOS 27・iPadOS 27・macOS 27・watchOS 27・tvOS 27・visionOS 27で動くアプリから使えます。

この版は呼び名が2つあります。Appleのデザイン更新履歴とWWDC26のデザインガイドでは、2026年6月8日のベータ公開時の名前が「SF Symbols 8」です。一方、現在のダウンロード欄は「SF Symbols 27」で、配布ファイルSF-Symbols-27.dmg(約445MB、2026年9月14日更新)を展開すると、アプリのバージョンは27.0(ビルド140)でした。「sf symbols 8」と「sf symbols 27」は同じ版を指しています。

動作要件には注意が必要です。公式ページのダウンロード欄は「macOS Sonoma以降」のままですが、インストーラはmacOS 15.0未満では中断し、アプリ本体の最低動作バージョン(LSMinimumSystemVersion)は15.4です。macOS Sonoma(14)のMacでは最新版を使えないと考えてください。

SF Symbols 7(2025年)で入ったDraw・グラデーション・Variable Draw

現在のアニメーションと着色の多くは、WWDC25で発表されたSF Symbols 7から使えるようになったものです。

  • Draw On/Draw Off:手書きの筆運びのように、シンボルが線を描きながら現れる・消えるアニメーション。コードからはiOS 26以降で指定できます。
  • グラデーション:1色から滑らかな線形グラデーションを自動で作る描画。4つのレンダリングモードすべてに重ねられます。
  • Variable Draw:温度計の目盛りのように、値の大きさを線の長さで表す表現。従来の可変カラーは不透明度で段階を表していました。

版ごとのシンボル追加数と必要なOS

シンボルは版ごとに追加され、新しいシンボルは古いOSでは表示されません。アプリに同梱されているname_availability.plistを集計すると、登録されているシンボル名は9,524個(言語別の字形を含む)で、追加された年と必要なOSは次のとおりです。

版 追加年 必要なiOS 必要なmacOS 追加された名前の数
SF Symbols 1 2019 13.0以降 10.15以降 1,679
SF Symbols 2 2020 14.0以降 11.0以降 1,207
SF Symbols 3 2021 15.0以降 12.0以降 875
SF Symbols 4 2022 16.0以降 13.0以降 1,337
SF Symbols 5 2023 17.0以降 14.0以降 1,486
SF Symbols 6 2024 18.0以降 15.0以降 1,955
SF Symbols 7 2025 26.0以降 26.0以降 645
SF Symbols 27 2026 27.0以降 27.0以降 340

追加数には年の途中の小数点リリースで増えた分も含みます。たとえば2024年の1,955個のうち238個はiOS 18.4で追加されたもので、iOS 18.0の端末では表示されません。実行端末のOSで提供されていないシンボルを使うと、SwiftUIでは何も描かれず、UIKitのUIImage(systemName:)はnilを返します。シンボルを選ぶときは、アプリの情報パネルで「使用可能なOS」を必ず確認してください。

SF Symbolsアプリのダウンロードとインストール手順

  1. AppleのSF Symbols公式ページを開き、「ダウンロード」を押します。Apple IDでのサインインは求められません。
  2. ダウンロードしたSF-Symbols-27.dmgを開き、中のSFSymbols.pkgを実行します。
  3. インストーラの途中でライセンス契約が表示されます。同意するとアプリが/Applicationsに、SF ProとSF Compactのフォントが/Library/Fontsに入ります(容量は約643MB)。
  4. Launchpadか/Applicationsから「SF Symbols」を起動します。

macOS 15.4より古いMacでは最新版を起動できないため、先にmacOSを更新します。Xcodeのバージョンと対応するmacOSの関係はXcodeの最新バージョンは26.6|バージョン確認とアップデート手順・Xcode 26の変更点でまとめています。

シンボル一覧の探し方:カテゴリ・検索・名前のコピー

AppleはWeb上にシンボル一覧を公開しておらず、公式の一覧はSF Symbolsアプリです。「sf symbols 一覧」で出てくるWebサイトはすべて第三者が作ったもので、最新版の追加分が反映されていないことがあります。

アプリの左側には32のカテゴリが並びます(日本語表示の場合)。「すべて」「新機能」のほか、Drawアニメーションに対応した「描画」、値で表示が変わる「可変」、「マルチカラー」、そして「コミュニケーション」「天気」「デバイス」「矢印」「数学」などの用途別です。直近の版で追加されたシンボルだけを見たいときは「新機能」を開きます。

シンボルを選んだら、メニューの「名前をコピー」でsquare.and.arrow.upのような名前を取り出し、コードに貼り付けます。デザインツールに貼るときは「シンボルをコピー」、画像として使うときは「イメージをコピー」を使い分けます。情報パネルの「使用可能」欄にはそのシンボルが使えるOSの下限が出ます。「対応状況でフィルタリング」でアプリの対応OSより新しいシンボルを一覧から外しておけば、前の章で説明した表示されない問題を選ぶ段階で防げます。

SwiftUIでの使い方:表示・色・アニメーション

シンボルの表示とサイズ・ウェイトの指定

SwiftUIではImage(systemName:)にシンボル名を渡します。サイズとウェイトはフォントと同じ.fontで指定し、文字とアイコンを並べるならLabelを使うと両者の位置が自動で揃います。

import SwiftUI

struct BasicView: View {
    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: "star.fill")
                .font(.system(size: 32, weight: .semibold))
                .foregroundStyle(.orange)
            Label("お気に入り", systemImage: "heart")
                .imageScale(.large)
        }
    }
}

.imageScale(.large)は文字サイズを変えずにシンボルだけを大きくする指定で、冒頭で説明した3段階のスケールに対応します。

レンダリングモードとグラデーションの指定

色の付け方は.symbolRenderingMode(iOS 15以降)で切り替えます。パレットは.foregroundStyleに渡した色がレイヤーの順に割り当てられます。グラデーションの.symbolColorRenderingMode(.gradient)はiOS 26以降のAPIなので、古いOSにも対応するアプリでは#availableで分岐します。

struct RenderingView: View {
    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: "cloud.sun.rain.fill")
                .symbolRenderingMode(.hierarchical)
                .foregroundStyle(.blue)
            Image(systemName: "cloud.sun.rain.fill")
                .symbolRenderingMode(.palette)
                .foregroundStyle(.gray, .yellow, .blue)
            Image(systemName: "cloud.sun.rain.fill")
                .symbolRenderingMode(.multicolor)
            if #available(iOS 26.0, macOS 26.0, *) {
                Image(systemName: "flame.fill")
                    .foregroundStyle(.red)
                    .symbolColorRenderingMode(.gradient)
            }
        }
        .font(.largeTitle)
    }
}

symbolEffectによるアニメーションと必要なOS

アニメーションは.symbolEffectで付けます。値が変わったときに1回だけ動かすならvalue:、効果の適用状態を切り替えるならisActive:を使います。回転のように動き続ける効果だけでなく、非表示などの状態を保つ効果にも使います。効果ごとに必要なOSが違います。

効果 必要なiOS 必要なmacOS
Bounce・Pulse・Scale・Appear・Disappear・Variable Color・Replace 17.0以降 14.0以降
Wiggle・Breathe・Rotate・Magic Replace 18.0以降 15.0以降
Draw On・Draw Off 26.0以降 26.0以降
struct EffectView: View {
    @State private var count = 0
    @State private var isSyncing = true
    @State private var isHidden = false
    // Drawは描画データを持つシンボルだけが動く。アプリの「Draw」カテゴリから名前を選ぶ
    let drawSymbolName: String

    var body: some View {
        VStack(spacing: 16) {
            Button {
                count += 1
            } label: {
                Image(systemName: "bell")
                    .symbolEffect(.bounce, value: count)
            }
            Image(systemName: "arrow.triangle.2.circlepath")
                .symbolEffect(.rotate, isActive: isSyncing)
            if #available(iOS 26.0, macOS 26.0, *) {
                Image(systemName: drawSymbolName)
                    .symbolEffect(.drawOff, isActive: isHidden)
                Button("表示切替") {
                    isHidden.toggle()
                }
            }
        }
    }
}

このコードは.rotateを含むため、iOS 18未満も対象にするアプリでは.rotateも#availableで囲む必要があります。

可変値による進捗・強度の表示

Image(systemName:variableValue:)(iOS 16以降)に0から1の値を渡すと、Wi-Fiの電波やスピーカーの音量のように、値に応じてシンボルの一部だけが塗られます。iOS 26以降は.symbolVariableValueMode(.draw)を付けると、塗り分けの代わりに線の長さで値を表すVariable Drawになります。

struct VariableView: View {
    var level: Double = 0.6

    var body: some View {
        Image(systemName: "wifi", variableValue: level)
    }
}

UIKitでの使い方:UIImage(systemName:)とSymbolConfiguration

UIKitではUIImage(systemName:)でシンボルを取得します。戻り値はOptionalで、名前の打ち間違いや対応OSより新しいシンボルではnilになります。サイズとウェイトはUIImage.SymbolConfigurationで指定します(どちらもiOS 13以降)。

let config = UIImage.SymbolConfiguration(pointSize: 40, weight: .bold, scale: .large)
let image = UIImage(systemName: "star.fill", withConfiguration: config)
let imageView = UIImageView(image: image)
imageView.tintColor = .systemOrange

// 階層レンダリング(iOS 15以降)
imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration(hierarchicalColor: .systemBlue)

// アニメーション(iOS 17以降)
imageView.addSymbolEffect(.bounce)

macOSのAppKitではNSImage(systemSymbolName:accessibilityDescription:)(macOS 11以降)を使います。第2引数はVoiceOverで読み上げる説明文です。

カスタムシンボルの作り方:テンプレート書き出しからXcode取り込みまで

必要なアイコンが標準にないときは、既存のシンボルをもとにカスタムシンボルを作ります。自作のシンボルもウェイトやスケール、レンダリングモード、アニメーションに追従させられます。

  1. SF Symbolsアプリで形の近いシンボルを選び、「ファイル」メニューの「カスタムシンボルとして複製」で複製してから、「テンプレートを書き出す…」でSVGを保存します。補間を使う場合は可変テンプレートを選び、Ultralight-S・Regular-S・Black-Sの3つを編集します。静的テンプレートとは収録する形の構成が異なります。
  2. 書き出したSVGをIllustrator・Sketch・Figmaなどのベクター編集ツールで開き、3つのウェイトのパスを描き替えます。3つの補間元は塗りのパスで構成し、パス数と各パスの制御点数を揃える必要があります。
  3. SF Symbolsアプリの「シンボルを読み込む…」で編集後のSVGを取り込み、「テンプレートを検証…」で形の不整合がないかを確かめます。レイヤーの分け方とDraw用のガイドポイントもここで設定します。
  4. 「シンボルを書き出す…」でSVGを書き出します。Xcodeのアセットカタログで「Editor」メニューの「Add New Asset」から「Symbol Image Set」を追加し、書き出したSVGを「Symbol SVG」欄へドラッグします。
  5. コードではsystemName:ではなくImage("シンボル名")で呼び出します。

ライセンスは、修正したテンプレートをアプリに組み込む方法をXcode経由に限定しています。手順4のようにXcodeのアセットカタログへ取り込めば、この条件を満たします。

ライセンスと商用利用の範囲:使える場面と使えない場面

「SF Symbolsは商用利用できるか」の答えは、用途を限れば使える、です。Appleプラットフォーム向けアプリのUIには有料・無料を問わず使え、規約の範囲内でモックアップやそのアプリの紹介画像にも表示できます。根拠はシステム提供シンボルの利用を定める「Xcode and Apple SDKs Agreement」と、モックアップや修正テンプレートの利用を定める「SOFTWARE LICENSE AGREEMENT FOR THE APPLE SF SYMBOLS APP」で、ここではその条項の要点をまとめます。

使ってよい場面

  • iOS・iPadOS・macOS・tvOS・watchOS向けアプリのUIへの組み込み(有料アプリも含む)
  • それらのアプリのUIのモックアップ作成
  • Appleプラットフォームで動く自社アプリのスクリーンショットや画像、紹介資料の中での表示(デジタル・印刷とも)
  • デザイン・開発を委託する外部の協力会社へのテンプレートやモックアップの受け渡し(委託先にもライセンスを守らせる責任は発注側が負う)

使ってはいけない場面:アプリアイコン・ロゴ・Android・Web

  • アプリアイコンとロゴ:SF Symbolsそのものに加え、見分けにくいほど似せた画像も禁止されています。Appleは違反した使用の変更・中止を求める権利を持っています。
  • Apple以外のOS向けのUI:AndroidアプリやWindowsアプリのUIに使うことも、そのモックアップを作ることもできません。
  • Webサイトや資料の素材:ライセンスはAppleソフトウェアを使ってWebサイトのコンテンツや作品を作ることを認めていません。シンボルをクリップアートや素材として抽出・再配布することもできません。

製品や機能を表すシンボルの個別制限

一部のシンボルには、ライセンスとは別に個別の制限があります。たとえばFaceTimeのシンボルを選ぶと、アプリに「このシンボルは編集できません。AppleのFaceTimeアプリケーションを示すときのみ使用できます。」のような注記が出ます。同梱の文言データでは、この種の注記がiPhone・AirPods・iCloud・Safari・Swift・Face IDなど62種類あり、MicrosoftのXbox・SonyのPlayStationといった他社製品も含まれます。これらを汎用の「電話」「通知」アイコンとして流用したり、カスタムシンボルの素材にしたりすることはできません。

visionOSの扱い

SF Symbolsアプリのライセンス本文は対象OSにvisionOSを挙げていません。一方で公式ページはSF Symbols 27の新しいシンボルがvisionOS 27で使えると案内しています。システム提供シンボルのアプリ内利用については、「Xcode and Apple SDKs Agreement」の2.10(System-Provided Images)がvisionOSも対象として明記しています。個別シンボルの制限にも従ってください。

SF Symbolsを採用すべきでない場面と失敗パターン

SF Symbolsは、Appleプラットフォーム専用のネイティブアプリなら第一候補です。ただし次の3つの条件では、最初から別の手段を選ぶべきです。

AndroidやWebと同じアイコンを使うクロスプラットフォームアプリ

FlutterやReact Nativeで同じデザインをAndroidとWebにも出すなら、SF Symbolsで統一することはできません。iOS側だけSF Symbolsにすると、プラットフォームごとにアイコンの管理が二重になります。全プラットフォームで同じアイコンを使うなら、GoogleのMaterial Symbols(Apache License 2.0)のように配布条件が広いアイコンセットを共通で使います。Materialの設計体系はMaterial Design 3(Material 3)とは?Expressiveの新機能と使い方を解説で扱っています。

旧OS対応アプリでの新規シンボルの表示欠落

SF Symbols 27のアプリには過去のシンボルも含まれます。実行端末のOSより後に追加されたシンボルは、その端末では表示されません。とくに年の途中のアップデート(iOS 18.4など)で増えたシンボルは見落としやすく、検証端末のOSが新しいとテストでも気づけません。対応OSの下限を上げられないなら、情報パネルで下限を確認して選ぶか、同じ形をカスタムシンボルとして同梱します。

Windowsのみの制作環境とMac専用アプリの制約

SF SymbolsアプリはMac専用です。ライセンスが禁止するのは、Apple以外のOSで動く製品向けのUIモックアップを作ることであり、作業用PCのOSを直接指定した制限ではありません。デザイナーがWindowsで作業する体制だと、一覧の閲覧もテンプレートの書き出しもできません。Macが無い環境でのiOS開発の進め方はWindowsでiOSアプリを開発する方法|Mac不要でビルドと提出を回す4経路を参照してください。

よくある質問

SF Symbolsは商用利用できますか?

iOS・iPadOS・macOS・tvOS・watchOS向けアプリのUIであれば、有料アプリでも使えます。そのアプリのモックアップや紹介画像に表示することもできます。アプリアイコン、ロゴ、Android・Windows向けのUI、Webサイトの素材としては使えません。

SF SymbolsはWindowsで使えますか?

使えません。SF SymbolsアプリはMac専用で、最新版はmacOS 15.4以降が必要です。ライセンスは、Apple以外のOSで動く製品向けのUIモックアップにシンボルを使うことを禁じています。

SF Symbolsの一覧はどこで見られますか?

公式の一覧はMac用のSF Symbolsアプリです。AppleはWeb版の一覧を公開していません。アプリでは32のカテゴリと、意味の近い言葉でも探せる検索を使って目的のシンボルを探せます。

SF Symbols 8はありますか?

SF Symbols 8は、WWDC26(2026年6月8日)でベータ版として公開されたときの名前です。現在のダウンロード表記とアプリのバージョンは「27」で、SF Symbols 8とSF Symbols 27は同じ版です。

SF SymbolsをFigmaやIllustratorで使うには?

SF Symbolsアプリをインストールすると、SF ProとSF Compactのフォントも入ります。アプリで「シンボルをコピー」してFigmaやIllustratorの文字ボックスに貼り付けると、SF Proの文字として表示されます。使えるのはAppleプラットフォーム向けアプリのモックアップに限られます。

関連記事

お気に入りに入れた記事の一覧

この記事は以下の記事からリンクされています

資料請求

今日のトレンド記事 直近 24 時間で、いつもより多く読まれている記事

  1. 2026.09.28 テックブログ タイムズカーの不正アクセスと約660万件の流出|免許証画像を退会者まで残さない保管設計
  2. 2026.09.25 コラム 最低賃金引き上げ【令和8年度】47都道府県の改定額・発効日と企業の対応手順
  3. 2026.09.25 コラム 障害者雇用の助成金一覧:月いくら・支給要件と申請書類を勤怠データで揃える方法
  4. 2026.09.28 テックブログ anthropic skillsとは?公式19スキルの中身とClaude Code・APIでの導入手順
  5. 2026.09.05 コラム 犯罪収益移転防止法の本人確認:2027年4月の対面IC読み取り義務化と改修要件

RELATED POSTS 関連記事

目次