Flaticonは、50万点以上の高品質ベクターアイコンを提供するウェブサイトです。シンプルなフラットデザインのアイコンが中心で、1万点以上のアイコンパックも用意。無料アイコンに加え、プレミアム会員向けにはさらに多くのアイコンや、パターン作成ツールなどが利用可能です。デザイン作業を効率化し、魅力的な作品作りをサポートします。
詳しく見る概要
phosphoricons.com（Phosphor Icons）は、現代のデジタルプロダクトデザインにおいて「最もバランスの取れたアイコンライブラリ」の一つと言えます。専門的な視点から、その卓越した魅力をいくつかご紹介します。
まず特筆すべきは、一貫性を保ちながら展開される 6つのウェイト（Thin, Light, Regular, Bold, Fill, Duotone） の存在です。これにより、UIの階層構造やブランドのトーンに合わせて、アイコンの太さを自由自在に調整できます。特に「Duotone（2色使い）」は、シンプルになりがちなWebサイトに洗練されたアクセントを加えてくれます。
技術的な実装のしやすさも抜群です。ReactやVueといった主要なフレームワークに対応したコンポーネントが提供されているほか、Figmaプラグインも完備されています。これにより、デザイナーとエンジニアが同じ仕様でスムーズに連携できる「共通言語」として機能します。
また、すべてのアイコンが16×16ピクセルのグリッドをベースに緻密に設計されているため、小さなボタン内でも視認性が損なわれず、拡大してもモダンでクリーンな印象を維持します。オープンソースでありながら、これほど高品質で汎用性の高いライブラリは稀有であり、プロフェッショナルな現場で第一選択肢となるのも納得のクオリティです。
インストール方法（Vanilla Web）
HTMLだけで使う場合は、CDNのCSSを読み込むだけでOKです。使いたい太さのスタイルを <head> に追加します。
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css"
/>アイコンは <i> タグで表示します。
<i class="ph ph-smiley"></i>
<i class="ph-fill ph-heart" style="color: hotpink"></i>インストール方法（React）
Reactでは専用パッケージを使います。
npm install @phosphor-icons/react使い方はとても簡単で、アイコンをコンポーネントとして読み込みます。
import { Smiley, Heart } from "@phosphor-icons/react";
function App() {
return (
<>
<Smiley />
<Heart size={32} color="hotpink" weight="fill" />
</>
);
}size、color、weight を指定できるのが特徴です。Phosphor Iconsは公式サイトの検索も使いやすく、初心者でも直感的に導入できます。
本ページの情報は、当サイトが独自に収集したデータおよびAIによる自動整理を含むため、正確性・完全性を保証するものではありません。掲載内容に基づいて利用者が行った判断・行動により生じた損害について、当サイトは一切の責任を負いかねます。
最新の詳細は必ずサービス提供元の公式サイトをご確認ください。