Webアプリ見本で使用するアイコン
確認日: 2026-09-12。公式配布ページのデジタル庁イラストレーション・アイコン素材から必要分を複製。
コピー元は .claude/paths.json の folders.digital_agency_assets で解決する共通素材フォルダ内の designsystem-assets/icon/svg/。同梱README、LICENSE.txt、icon/icon_guideline.pdfを確認した。SVGは内容を編集せず複製し、HTML側で縦横比1:1、通常24px相当で表示する。原本の色を保持し、表示時は下記のとおりCTA内の＋とサブメニュー矢印の色をCSSで調整する。
| 配置ファイル | コピー元ファイル | 用途 |
|---|---|---|
| app-menu.svg | menu_line.svg | 狭幅メニューの起点 |
| app-help.svg | help_line.svg | ヘルプへの導線 |
| app-me.svg | me_line.svg | アカウント表示 |
| app-work.svg | work_line.svg | プロジェクトの主ナビ |
| app-history.svg | history_line.svg | 更新履歴 |
| app-arrow-down.svg | arrow_down_line.svg | 子階層の開閉 |
| app-arrow-left.svg | arrow_left_line.svg | 旧ナビ開閉用として保持。現行見本では未使用 |
| app-add.svg | add_line.svg | 新規作成（青いCTA内では表示側CSSで白表示） |
| app-documents.svg | documents_line.svg | 初回の空状態 |
| app-search.svg | search_line.svg | 検索・検索結果なし |
開閉を示す矢印はHTML/CSSで向きを変える。SVGデータ自体の編集は行っていない。app-add.svg は青い作成CTAでCSSマスクと background: currentColor により白く表示する。app-arrow-down.svg もCSSマスクとして16pxで表示し、background: currentColor と補助文字色トークンにより灰色表示する。サイドバー開閉はユーザー指定の形に合わせ、Lucideのpanel-leftへ統一した。狭幅ドロワーの閉じる操作は「閉じる」の文字で示す。
装飾として付ける画像はalt=""にし、リンクやボタンに文字ラベルまたは読み上げ名を付ける。同じ役割で別のアイコンセットを混在させない。
著作権は原則デジタル庁に帰属。通常利用・商用利用が可能で、未加工素材のクレジットは必須ではない。編集した素材の公表等は出典・加工内容の明示等の条件に従う。全文は同梱ライセンスと公式利用規約を参照。
Fluxionのブランドマークは自社HPの波・粒子マークを静止表示として踏襲したもので、デジタル庁素材ではない。