Icon

アイコンのサイズは12pxから54pxまでの12段階を用意しています。サイズはタイポグラフィトークンで管理しています。

詳細はタイポグラフィトークンのガイドラインをご確認ください。

アイコンのスタイルは、タイポグラフィトークンのfontWeightで管理しています。詳細はタイポグラフィトークンのガイドラインをご確認ください。

fill: 0

アウトラインのスタイルで表示します。

fill: 1

塗りのスタイルで表示します。

アイコンはインタフェースの概念やアクションを非言語で簡潔に表すことに適しています。アイコンを選択するときは次のガイドラインを考慮してください。

• 可能な場合はテキストを置き換えるのではなく、アイコンを使用してテキストを補足します。
  テキストを使わずにアイコンのみを使用する場合は、アイコンの意味が明瞭であることを確認してください。
• 認識しやすく、コンセプトやアクションを正確に描写するアイコンを選択してください。
• 製品またはブランド全体でアイコンの使用の一貫性を維持します。
• 一部のユーザーにとって混乱を招く可能性がある、複雑または抽象的な概念にアイコンの使用は避けてください。
• 読みやすさと認識しやすさを確保するために、あらかじめ定められたアイコンサイズを順守してください。

以下のアイコンは特定のコンテキストを表現する際に使用するアイコンです。対応するコンテキストを表現する以外の用途で使用することは控えてください。

info

info のアイコンは、重要な情報を示すステータスとして使用します。

success

check_circle のアイコンは、成功、肯定的な結果を示すステータスとして使用します。

warning

warning のアイコンは、警告を示すステータスとして使用します。

negative

error アイコンは、エラー、危険、否定的な結果を示すステータスとして使用します。