oreo-design/doodle-icons

これは何？

主な機能

• 0148×48のグリッドに配置された、手描き風の線のみのアイコン204種類
• 02線が描かれたあと揺れ続ける、アニメーションSVG版
• 03揺れに使う共有SVGフィルター。振幅、時間、周波数を設定可能
• 04サイズ、線幅、描画タイミングをpropsで指定できるReactコンポーネント
• 05線にcurrentColorを使い、アイコンの色をCSSから設定可能
• 06ランタイム依存関係なし。ESM、CJS、TypeScriptの型定義を提供

ユースケース

• マーケティングサイトやランディングページに、遊び心のある手描き風アイコンを追加する
• 誕生日や祝日など、季節やテーマに合わせたページを飾る
• ビルド工程なしで、SVGファイルを静的HTMLに直接使う
• AIコーディングエージェントに、落書き風のインターフェースを作るための指針を与える

クイックスタート

1. 1

   React パッケージをインストールします

   npm i @oreo-design/doodle-icons
2. 2

   ページ上で boil filter を一度マウントします

3. 3

   boilId prop を指定してアイコンをレンダリングします

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

• !追加アイコン 1,700 種以上を含む Pro セットは有料で、このリポジトリには含まれていません。
• !Wiggle エフェクトは固定スタイルのため、すべてのデザインに合うとは限りません。
• !静止 SVG アイコンは img タグ経由で読み込むと黒く表示されます。色を変更するには、インライン化するか React コンポーネントを使用する必要があります。

トピック

よくある質問

doodle-icons とは？

手描き風の204種類のSVGアイコンを収録した、MITライセンスの無料ライブラリ。線が描かれて揺れ続けるアニメーションとReactコンポーネントに対応。 Oreo Doodle Iconsは、意図的にラフな手描きタッチで描かれた、線のみのアイコンを204種類収録したライブラリです。各アイコンは静止SVGと、線が描かれたあと揺れ続けるアニメーションSVGのどちらでも利用できます。同じアイコンをReactパッケージ経由で使うことも、SVGを扱えるページに通常のファイルとして配置することもできます。

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

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

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

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

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

マーケティングサイトやランディングページに、遊び心のある手描き風アイコンを追加する 誕生日や祝日など、季節やテーマに合わせたページを飾る ビルド工程なしで、SVGファイルを静的HTMLに直接使う AIコーディングエージェントに、落書き風のインターフェースを作るための指針を与える

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

React パッケージをインストールします: npm i @oreo-design/doodle-icons ページ上で boil filter を一度マウントします boilId prop を指定してアイコンをレンダリングします

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

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