guokaigdg/naive-icons

これは何？

主な機能

• 01インターフェース、アクション、メディア、ナビゲーション、動物、食べ物など、11カテゴリのアイコン。
• 02各アイコンをSVGファイルとReact TSXコンポーネントの両方で提供。
• 03TypeScript型一式と共有カラーパレットをエクスポート。
• 04strokeとcolorのpropsで、手描きの雰囲気を保ちながらアイコンのサイズや色を調整可能。
• 05アイコンコードの生成に使える、インストール可能なAIエージェントスキル。

ユースケース

• ReactのWebアプリやランディングページに、遊び心のある手描きアイコンを追加する。
• ログイン画面やオンボーディング画面に、温かみのあるパーソナルな雰囲気を加える。
• React以外のプロジェクトやアイコンスプライトで、SVGファイルをそのまま使う。
• AIコーディングアシスタントに、プロジェクトに合うアイコンを選んで挿入させる。

クイックスタート

1. 1

   パッケージをインストールする

   npm install naive-icons
2. 2

   Reactでアイコンをインポートして使用する

   import { HomeIcon } from 'naive-icons';

使う前に知っておきたいこと

• !多くのアイコンでは色がハードコードされているため、ルートのfillを指定しても色は変わりません。簡単に変更できるのはstrokeの色だけです。
• !React 16.8以降が必要です。

トピック

よくある質問

naive-icons とは？

手描きの素朴なフォークアート風SVGアイコンを揃えた、AIエージェントスキルも利用できるReact・TypeScriptライブラリ。 Naive Iconsは、手描きのフォークアート風の見た目が特徴のSVGアイコンライブラリです。各アイコンは48x48のグリッドに、線幅3.5、丸い線端、固定のレトロなカラーパレットで描かれており、生き物のアイコンの多くには点の目と小さな笑顔が付いています。すべてのアイコンをSVGソースファイルとReact TSXコンポーネントの両方で利用できます。

naive-icons は無料で使えますか？ライセンスは？

naive-icons は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

naive-icons は今もメンテナンスされていますか？

活発にメンテナンス中。naive-icons の最終コミットは 2026年10月14日 です。

naive-icons は何に使えますか？

ReactのWebアプリやランディングページに、遊び心のある手描きアイコンを追加する。 ログイン画面やオンボーディング画面に、温かみのあるパーソナルな雰囲気を加える。 React以外のプロジェクトやアイコンスプライトで、SVGファイルをそのまま使う。 AIコーディングアシスタントに、プロジェクトに合うアイコンを選んで挿入させる。

naive-icons のインストール方法は？

パッケージをインストールする: npm install naive-icons Reactでアイコンをインポートして使用する: import { HomeIcon } from 'naive-icons';

naive-icons はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/guokaigdg/naive-icons