Yesicon

Yesicon

Yesicon · 画像

Yesiconは、240のオープンソースアイコンセットから約40万点の無料ベクターアイコンをまとめて検索できるサイトだ。色とサイズを調整し、SVG・PNG・コードをその場で書き出せる。

Yesicon の画面プレビュー

Yesicon について

About

Yesiconとは

Yesiconはブラウザで動くアイコン検索エンジンで、デザイナーと開発者の両方を対象にしている。Material SymbolsやTablerからPhosphor、Lucideまで、数十のオープンソース集からアイコンを集め、ひとつの検索ボックスに収めた。downloadやcartと打ち込み、スタイルやカテゴリで絞れば、目的のアイコンにたどり着く。

サイト自体がオープンソースアイコン集をそのまま引ける場所として機能し、インストールは要らない。元データはオープンソースプロジェクトIconifyが提供している。同プロジェクトはすでに数百のアイコン集を同じ形式に揃えており、Yesiconはその上に載る検索レイヤーだ。検索の精度は元の集がアイコンに付けた名前次第で、非常に珍しい図柄はまだ収録されていないこともある。

サイトは無料で、アカウントも要らない。Yesiconの中でライブラリを育てるのではなく、アイコンをページから数秒でプロジェクトへ持ち出すために作られている。

使い始める

  1. yesicon.appを開き、検索ボックスにキーワードを入れる。ページのどこからでもCtrl Kで入力欄に飛べる。
  2. フィルタで候補を絞る。線画・塗りつぶし・2トーンといったスタイル、UI操作やブランドといったカテゴリ、そして信頼できる作者が決まっているならアイコン集そのものを選ぶ。
  3. プレビューパネルで色とピクセルサイズを決める。操作に合わせて図柄が描き直される。
  4. 必要な形式でコピーする。生のSVG、指定サイズのPNG、React・Vue・Svelte・TailwindCSS・UnoCSS向けのコード断片のいずれかだ。
  5. 公開前にライセンスを確認する。アイコンはそれぞれ元の集に属するので、条件はYesiconではなくそのプロジェクトのものになる。

AIツール情報

Yesiconの料金、対応プラットフォーム、性能を簡単に確認できます。

無料プランはい
有料プランN/A
プラットフォームWeb
開発元Yesicon
カテゴリ画像
リリース日Sep 2023
最終更新Oct 2026
サイト訪問数66.5K
サイト世界ランキング386.1K
API提供状況いいえ

こんな人におすすめ

このツールが最も力を発揮するユーザー、タスク、シーン。

ユーザー

  • フロントエンド開発者
  • UI・プロダクトデザイナー
  • 学生や個人制作
  • ひとりで小さなアプリを作る人

タスク

  • 画面部品に合うアイコンを探す
  • 新規プロジェクト用に統一されたアイコン集を選ぶ
  • ブランドカラーに合わせて色を変える
  • フレームワークでそのまま使えるコードを取る
  • SNSやブランドのロゴを揃える

シーン

  • 夜遅くにランディングページを作るとき
  • 古いコードベースで混在したアイコンを整理するとき
  • デザインシステムができる前に試作するとき
  • スライドやPDFにPNGアイコンを貼るとき

主な機能

240セットをまたぐ一括検索

1回の検索で、Material Symbols、Material Design Icons、Tabler、Solar、Remix Icon、Lucide、Phosphor、Heroicons、Font Awesomeといったオープンソース集の約40万点を走査する。どの図柄がどのプロジェクトのものか覚えておく必要はない。結果ページには各アイコンの横にセット名が出るので、出どころは常に分かる。

スタイル・カテゴリ・セットの三系統フィルタ

絞り込みは3方向から効く。スタイルは線画・塗りつぶし・2トーン・角丸を分ける。カテゴリはUI操作やナビゲーションからブランド、食べ物、ゲームまで用途でまとめる。セットの絞り込みは、選択肢の多さより見た目の統一が大事なときに、範囲をひとつのコレクションへ寄せる。3つを組み合わせれば、数千件の結果がたいてい1画面に収まる。

色とサイズのライブプレビュー

プレビューパネルでは、書き出す前に色とピクセルサイズを変えられる。見えているとおりの状態がクリップボードに入る。CSS変数に合わせたい開発者には特にありがたい機能で、黒いSVGをダークテーマに貼って手作業で直した経験がある人にも効く。

SVG・PNG・コードでの書き出し

SVGコードをコピーするにも、指定サイズのPNGを保存するにも、React・Vue・Svelte・TailwindCSS・UnoCSS向けの断片を取るにも、同じパネルで済む。FigmaやSketchに貼るデザイナーも、コンポーネントをテンプレートに差し込む開発者も同じ場所で済む。コードはプレビューと同じ元データから生成されるため、出力は必ず一致する。

人気キーワードのページ

Trendingページには、英語話者が直近6か月で最も検索した語が月末更新で並ぶ。plus、user、star、searchといった語が上位に来るので、一般的な操作をコミュニティがどう呼ぶかが分かる。アイコンの一般的な名称を思い出せないときの確認用としても使える。

9言語のインターフェース

画面は英語、簡体字中国語、繁体字中国語、スペイン語、ドイツ語、フランス語、日本語、韓国語、ポルトガル語に対応する。言語ごとにURLが分かれているため、各地域に散らばったチームでもアカウントを分けずに母語で作業できる。検索語自体は英語が最も効くので、英語での呼び方を押さえておきたい。

メリットとデメリット

メリット

  • 収録数が桁違いで、しかも無料だ。240セット40万点あれば、定額サービスなしでほぼどんなUIにも対応できる。
  • 検索、絞り込み、コピーが同じページで完結する。アイコンサイトを行き来する手間が消える。
  • 色とサイズのプレビューで手直しが1工程減る。欲しい状態のままコピーできるためだ。
  • React・Vue・TailwindCSS向けの断片が手作業の変換を省き、出力もプレビューと一致する。
  • アカウントも利用上限もなく、長いデザイン作業の間ずっと検索を続けられる。

デメリット

  • 公式APIも一括ダウンロードもない。200点をリポジトリに移すには、結局1点ずつクリックすることになる。
  • 各アイコンは元セットのライセンスに従い、その条件はばらばらだ。商用利用の前に1セットずつ確認する必要があり、大きな案件では手間が増える。
  • 開発元はFigma、Sketch、VS Code向けのプラグインを出していない。キャンバス内で完結するツールと比べると、デザイナーは工程が1つ増える。
  • 検索の質は元のアイコン名に左右される。説明の薄いものや奇妙な名前のものは、収録されていても表に出にくい。

よくある質問

無料だ。有料プランもアカウントもダウンロード上限もない。登録なしで検索とコピーができ、あとから解約するものも残らない。