アイコンライブラリパネル

アイコンライブラリパネルでは、GCP・Google・AWS・Cloudflare・Sakura Cloud・Twemoji・React Icons のアイコンをキャンバスに配置できます。ツールバー右側の絵文字アイコンボタンを押すと表示されます。

対応プロバイダー

プロバイダー	説明
GCP	Google Cloud Platform のアーキテクチャアイコン
Google	Google公式サービス/プロダクトアイコン 75件（Wikimedia CommonsのSVG優先、未提供分は公式PNG）
AWS	Amazon Web Services のアーキテクチャアイコン
Cloudflare	Cloudflare 開発スタックアイコン 30件（公式 docs リポジトリ由来）
Sakura Cloud	さくらのクラウドのサービスアイコン
Twemoji	Twitter 絵文字アイコン約1,630件（CC BY 4.0）
React Icons	30+セット約50,000件のアイコン（provider別検索インデックスで管理）

Twemoji カテゴリ

カテゴリ	内容
顔・感情	笑顔・泣き顔・表情など
人・体	人物・仕草・職業など
動物・自然	動物・植物・天気など
食べ物・飲み物	料理・果物・飲み物など
旅行・場所	乗り物・建物・地形など
活動	スポーツ・ゲーム・芸術など
モノ	電化製品・衣類・文具など
記号	矢印・図形・ハートなど
国旗	世界各国の国旗・地域旗

アイコンの検索と絞り込み

全ライブラリ横断検索: 検索ボックスは常に GCP/Google/AWS/Cloudflare/Sakura Cloud/Twemoji/React Icons 全体を対象に検索します
初期プロバイダー: 新規ドキュメントでは Twemoji が初期選択です（保存済みドキュメントでは前回の選択が復元されます）
プロバイダー切替: プロバイダーを選ぶと、そのプロバイダーに絞り込めます（すべて選択も可能）
カテゴリフィルター: 現在のプロバイダー条件に応じてカテゴリ（ソースセット）を絞り込めます
検索中の操作: 検索ボックスに1文字以上入力している間は、プロバイダー/カテゴリのドロップダウンは無効になります
初期カテゴリ: Twemoji の場合は「モノ」、React Icons の場合は既定セット（ci）、それ以外は「すべて」が初期選択です
テキスト検索: アイコン名・カテゴリ・ID・タグに対して部分一致で検索します
検索処理: 入力は300msのデバウンス後にクライアントサイドで処理され、必要な provider の検索インデックスだけを読み込みます
件数表示: 表示件数とヒット総数（全ライブラリ）を表示します
表示列数: パネル幅を広げるとアイコン一覧の列数も自動で増えます
表示上限: 描画負荷を抑えるため表示件数には上限があります

Sakura Cloud 利用ガイドライン

利用目的: サービス紹介コンテンツや、さくらのクラウドを使った構成図の作成に利用できます
利用禁止: さくらのクラウドと無関係な文脈での利用、アイコン改変、アイコンそのものの再配布は禁止です
利用上の注意: 最新のアイコンセットを使い、必要に応じてサービス名を併記し、重ね配置や縦横比を崩す拡大縮小を避けてください

詳細は公式ページを参照してください: さくらのクラウドサービスアイコンセット

アイコンの配置

SVGアイコンをキャンバスにドラッグ＆ドロップすると、builtinノードとして配置されます。Googleプロバイダーには公式配布がPNGのみのアイコンが含まれており、PNGはimageノードとして配置されます。ドロップ時のサイズはドキュメント共通のアイコンサイズ設定（初期値 100x100）に従います。React Icons のみアイコン色（Color）がデフォルト値で設定され、GCP/Google/AWS/Cloudflare/Sakura Cloud/Twemoji は色未設定で追加されます。builtinノードはアイコンの公開パスではなくライブラリ内の論理IDで参照されるため、アイコンファイル名の大文字小文字差異に影響されません。builtinノードはラベル付きで表示でき、ラベルの表示・フォント・サイズ・文字スタイル（太字・斜体・取り消し線）・色に加えて、ラベル文字のアウトラインと文字シャドウもプロパティパネルで共通設定できます（ラベル表示の初期値はON）。

利用条件・商標ポリシーはライセンスページを参照してください。