アイコン

アイコンは、意味をグラフィックとして表現し、使用します。「意味」とは以下のようなものと考えられます。

機能を視覚的かつ直感的に表現すること
行動をわかりやすく促すこと
現在の状態をユーザーに伝えること

機能を視覚的かつ直感的に表現

アイコンは、機能を視覚的かつ直感的に表現します。例えば、ホームアイコンは「ホームに戻る」という機能を表現します。また、ゴミ箱アイコンは「削除」という機能を表現します。

アクションを促す

アイコンは、アクションを促します。例えば、プラスアイコンは「追加」というアクションを促します。また、ハンバーガーアイコンは「メニューを開く」というアクションを促します。

状態の表現

アイコンは、状態を表現します。例えば、チェックアイコンは「完了」という状態を表現します。また、エラーアイコンは「エラー」という状態を表現します。

また、ローディング状態をユーザーに示すために、アニメーション効果を活用したスピナーアイコンを使用することもあります。

利用方法

OP に使用するアイコンは原則、Material Symbols Iconsを使用します。Material Symbols Icons は、多くのアイコンのみならず、ウエイトや角の形状におけるバリエーションを提供しています。

角の形状は原則、roundedを使用します。roundedは、角を丸くした形状を表現します。例えば、home-outline-roundedは、ホームアイコンの角を丸くした形状を表現します。

ではなく

が、好ましい

Web サイトや Web アプリの実装

現在、Material Symbols Icons を利用するためのアイコンフレームワークであるIconifyを使用してアイコンを提供しています。Iconify は、複数のアイコンセットを提供しており、アイコン名を指定することで、簡単にアイコンを表示することができます。

<Icon name="material-symbols:home-rounded" size="3rem" />
<Icon name="material-symbols:photo-camera-rounded" class="text-blue-600" size="1.5rem" />
<Icon name="material-symbols:person-rounded" class="text-orange-500" size="1.5rem" />
<Icon name="material-symbols:mail-outline-rounded" class="text-purple-500" size="1.5rem" />
<Icon name="material-symbols:check-circle-outline-rounded" class="text-green-500" size="1.5rem" />

material-symbols:home-roundedアイコンのみサイズを3remにしています。

Figma での利用

Figma でアイコンを使用する場合、Material Symbols Pluginをインストールして使ってください。