ハクソク

世界を動かす技術を、日本語で。

アイコニファイ：オープンソースアイコンのライブラリ

127日前原文(icon-sets.iconify.design)

概要

  • アイコンセットの種類とライセンス情報の一覧
  • 主要なカテゴリごとに代表的なアイコンセットを紹介
  • 各アイコンセットのアイコン数やライセンス形態の明記
  • デザインや用途による分類
  • アーカイブ・非メンテナンス状態のアイコンセットも記載

アイコンセット一覧とライセンス情報

  • Material系

    • Material Symbols （Apache 2.0、15107個）
    • Material Symbols Light （Apache 2.0、15180個）
    • Google Material Icons （Apache 2.0、10955個）
    • Material Design Icons （Apache 2.0、7447個）
    • Material Design Light （Open Font License、284個）
    • Material Line Icons （MIT、1218個）

  • UI 24px系

    • Solar （CC BY 4.0、7401個）
    • Tabler Icons （MIT、5986個）
    • MingCute Icon （Apache 2.0、3320個）
    • Remix Icon （Apache 2.0、3188個）
    • Myna UI Icons （MIT、2580個）
    • IconaMoon （CC BY 4.0、1781個）
    • Iconoir （MIT、1671個）
    • Lucide （ISC、1667個）
    • Lucide Lab （ISC、373個）
    • Unicons （Apache 2.0、1215個）
    • TDesign Icons （MIT、2130個）
    • Sargam Icons （MIT、1299個）
    • BoxIcons （CC BY 4.0、814個）
    • BoxIcons Solid （CC BY 4.0、665個）
    • Majesticons （MIT、760個）
    • css.gg （MIT、704個）
    • Flowbite Icons （MIT、751個）
    • Basil （CC BY 4.0、493個）
    • Pixelarticons （MIT、486個）
    • Pixel Icon （CC BY 4.0、450個）
    • Akar Icons （MIT、454個）
    • coolicons （CC BY 4.0、442個）
    • ProIcons （MIT、539個）
    • Typicons （CC BY-SA 4.0、336個）
    • Meteor Icons （MIT、321個）
    • Prime Icons （MIT、313個）
    • Circum Icons （Mozilla Public License 2.0、288個）
    • Feather Icon （MIT、255個）
    • EOS Icons （MIT、253個）
    • Bitcoin Icons （MIT、250個）
    • Humbleicons （MIT、286個）
    • Unicons Monochrome （Apache 2.0、298個）
    • Unicons Thin Line （Apache 2.0、216個）
    • Unicons Solid （Apache 2.0、190個）
    • Gridicons （GPL 2.0、207個）
    • Mono Icons （MIT、180個）
    • Cuida Icons （Apache 2.0、182個）
    • WeUI Icon （MIT、162個）
    • Duoicons （MIT、91個）
    • SVG Spinners （MIT、46個）
    • Huge Icons （MIT、4653個）
    • Lets Icons （CC BY 4.0、1528個）
    • Ultimate free icons （CC BY 4.0、1999個）
    • Plump free icons （CC BY 4.0、1499個）
    • Sharp free icons （CC BY 4.0、1500個）
    • Mage Icons （Apache 2.0、1042個）
    • Stash Icons （MIT、982個）
    • Lineicons （MIT、606個）
    • IconPark Outline （Apache 2.0、2658個）
    • IconPark Solid （Apache 2.0、1947個）
    • IconPark TwoTone （Apache 2.0、1944個）
    • Jam Icons （MIT、940個）
    • Cyber free icons （CC BY 4.0、500個）
    • Guidance （CC BY 4.0、360個）

  • UI 16px / 32px系

    • Carbon （Apache 2.0、2439個）
    • IonIcons （MIT、1357個）
    • Famicons （MIT、1342個）
    • Ant Design Icons （MIT、830個）
    • Lsicon （MIT、716個）
    • Gravity UI Icons （MIT、744個）
    • CoreUI Free （CC BY 4.0、554個）
    • Röntgen （CC BY 4.0、514個）
    • Element Plus （MIT、293個）
    • Charm Icons （MIT、261個）
    • Quill Icons （MIT、140個）
    • Bytesize Icons （MIT、101個）
    • Bootstrap Icons （MIT、2078個）
    • Pixel free icons （CC BY 4.0、662個）
    • Streamline Block （CC BY 4.0、300個）
    • Rivet Icons （BSD 3-Clause、210個）
    • Nimbus （MIT、140個）
    • FormKit Icons （MIT、144個）

  • UI Other / Mixed Grid系

    • Fluent UI System Icons （MIT、18959個）
    • Phosphor （MIT、9072個）
    • Teenyicons （MIT、1200個）
    • Clarity （MIT、1103個）
    • Freehand free icons （CC BY 4.0、1000個）
    • Siemens Industrial Experience Icons （MIT、1415個）
    • Octicons （MIT、720個）
    • Memory Icons （Apache 2.0、651個）
    • System UIcons （Unlicense、430個）
    • Radix Icons （MIT、332個）
    • Zondicons （MIT、297個）
    • uiw icons （MIT、214個）
    • CodeX Icons （MIT、78個）
    • Evil Icons （MIT、70個）
    • HeroIcons （MIT、1288個）
    • SidekickIcons （MIT、232個）
    • Pepicons Pop! （CC BY 4.0、1275個）
    • Pepicons Print （CC BY 4.0、1275個）
    • Pepicons Pencil （CC BY 4.0、1275個）
    • Framework7 Icons （MIT、1253個）
    • Gitlab SVGs （MIT、410個）
    • Garden SVG Icons （Apache 2.0、912個）
    • Streamline （CC BY 4.0、3000個）
    • Flex free icons （CC BY 4.0、1500個）
    • Font Awesome Solid （CC BY 4.0、1983個）
    • Font Awesome Regular （CC BY 4.0、272個）
    • Pico-icon （Open Font License、824個）
    • OOUIMIT （370個）
    • Maki （CC0、215個）
    • Temaki （CC0、543個）
    • OpenSearch UI （Apache 2.0、437個）
    • NRK Core Icons （CC BY 4.0、236個）
    • Dinkie Icons （MIT、1198個）
    • Qlementine Icons （MIT、863個）

  • UI Multicolor系

    • Ultimate color icons （CC BY 4.0、998個）
    • Plump color icons （CC BY 4.0、1000個）
    • Freehand color icons （CC BY 4.0、1000個）
    • Kameleon color icons （CC BY 4.0、400個）
    • Stickies color icons （CC BY 4.0、200個）
    • Fluent UI System Color Icons （MIT、890個）
    • Streamline color （CC BY 4.0、2000個）
    • Flex color icons （CC BY 4.0、1000個）
    • Sharp color icons （CC BY 4.0、1000個）
    • Cyber color icons （CC BY 4.0、500個）
    • IconPark （Apache 2.0、2658個）
    • Marketeq （MIT、590個）

  • プログラミング用アイコン

    • VSCode Icons （MIT、1467個）
    • Codicons （CC BY 4.0、534個）
    • Material Icon Theme （MIT、1136個）
    • File Icons （ISC、930個）
    • Devicon （MIT、1022個）
    • Devicon Plain （MIT、745個）
    • Catppuccin Icons （MIT、656個）
    • Skill Icons （MIT、397個）
    • UnJS Logos （Apache 2.0、63個）

  • ロゴ系アイコン

    • Simple Icons （CC0 1.0、3379個）
    • SVG Logos （CC0、1837個）
    • Logos free icons （CC BY 4.0、1362個）
    • CoreUI Brands （CC0 1.0、830個）
    • Font Awesome Brands （CC BY 4.0、548個）
    • BoxIcons Logo （CC BY 4.0、155個）
    • Nonicons （MIT、69個）
    • Arcticons （CC BY-SA 4.0、14006個）
    • Custom Brand Icons （CC BY-NC-SA 4.0、1491個）
    • Brandico （CC BY SA、45個）
    • Entypo+ Social （CC BY-SA 4.0、76個）
    • Web3 Icons （MIT、1769個）
    • Web3 Icons Branded （MIT、2024個）
    • Cryptocurrency Icons （CC0 1.0、483個）
    • Cryptocurrency Color Icons （CC0 1.0、483個）

  • 絵文字アイコン

    • OpenMoji （CC BY-SA 4.0、4449個）
    • Twitter Emoji （CC BY 4.0、3988個）
    • Noto Emoji （Apache 2.0、3710個）
    • Fluent Emoji Flat （MIT、3145個）
    • Fluent Emoji High Contrast （MIT、1595個）
    • Noto Emoji (v1) （Apache 2.0、2162個）
    • Emoji One (Colored) （CC BY 4.0、1834個）
    • Emoji One (Monotone) （CC BY 4.0、1403個）
    • Emoji One (v1) （CC BY-SA 4.0、1262個）
    • Firefox OS Emoji （Apache 2.0、1034個）
    • Streamline Emojis （CC BY 4.0、787個）

  • 国旗・地図アイコン

    • Circle Flags （MIT、634個）
    • Flag Icons （MIT、542個）
    • Flagpack （MIT、254個）
    • CoreUI Flags （CC0 1.0、199個）
    • Font-GIS （CC BY 4.0、367個）
    • Map Icons （Open Font License、167個）
    • GeoGlyphs （MIT、30個）

  • テーマ別アイコン

    • Game Icons （CC BY 3.0、4123個）
    • FontAudio （CC BY 4.0、155個）
    • Academicons （Open Font License、158個）
    • Weather Icons （Open Font License、219個）
    • Meteocons （MIT、447個）
    • Health Icons （MIT、2024個）
    • Medical Icons （MIT、144個）
    • Covid Icons （CC BY 4.0、142個）

  • アーカイブ／非メンテナンス系

    • Line Awesome （Apache 2.0、1544個）
    • Eva Icons （MIT、490個）
    • Dashicons （GPL、342個）
    • Flat Color Icons （MIT、329個）
    • Entypo+ （CC

Hackerたちの意見

以前のディスカッション: 2024年9月 (コメント4件, ポイント17): https://news.ycombinator.com/item?id=41615563

https://icones.js.org/ は、個人的にアイコンを探すのにいいサイトだよ。

アイコン最適化の深い話を書きたくなっちゃう。ウェブサイトがレイアウトシフトするのを見るとイライラするんだよね。アイコンをインラインにしてないせいで。

└

あなたのコメントに同意します。これはよく見落とされがちなテーマですね。アイコンをインラインで使うのも一つの解決策ですが、DOMのサイズが大きくなることには注意が必要です。アイコンの複雑さや数、繰り返しの仕方によっては、レイジーローディングを取り入れた方が良い場合もあります。レイアウトシフトは、まず第一に不適切なスペースの予約が原因です。

iconifyは、もう1年以上私のアイコンの主なソースだよ。ほとんどのウェブサイトやアプリは、デザインにラスタライズされたグラフィックスを使わなくなった。SVGとCSSのグラデーションや背景、エフェクトで必要なものは全部賄えてる。

これらのSVGの中には、いい感じにアニメーションしているものもあって、検索もできるよ。オフラインのテキストエディタに使ったら、アイコンが素晴らしい結果になった！ https://wrifocus.bounded.cc

└

共有してくれてありがとう！すごく役立ちそうですね。他にプロジェクトの詳細を教えてもらえますか？自己ホスティングできるかどうかとか。

└

それはどのアイコンセットですか？「アニメーションを含む」でフィルターをかけると、ローダーが2つと天気アイコンが1つの3つのアイコンセットしか出てこないんですが。

共有してくれてありがとう、これは私にとって役立ちそう。

これでアイコンの問題が簡単に解決できたよ。

いい仕事だね！

彼らはアイコンのSVGを取得するためのAPIも提供しています。D2で（建築）図を作るのが大好きで、アイコンが適切なところではIconifyの豊富なアイコンライブラリを使っています。IconifyのSVGを使ったサンプル図はこんな感じです：docker: Docker { icon: https://api.iconify.design/logos/docker-icon.svg } kubernetes: Kubernetes { icon: https://api.iconify.design/logos/kubernetes.svg } docker -> kubernetes: deploy [1]: https://d2lang.com/

私のサイトでは、IconifyにあるいくつかのアイコンセットをAI画像モデルで拡張できるので、大きなものだけじゃなくて、もっとユニークなセットを使うのも安心ですよ： https://universymbols.com