本文へスキップ
JA

3 個のアイコン · MIT ライセンス

フォーム部品のアニメーションアイコン

チェック済みと未チェックの状態をアニメーションで切り替えるチェックボックス、ラジオボタン、トグルスイッチです。オンボーディングのチェックリストや設定画面など、素の input では味気ない場所で使えて、状態もひと目で読み取れます。

3 個すべてがクリックで 2 つの状態を切り替えるアイコンです。どのアイコンも React コンポーネント、shadcn/ui コンポーネント、Lottie JSON アニメーション、静的 SVG として提供され、MIT ライセンスのもと商用利用も無料です。

フォームのアイコン一覧

使いどころ

  • 機能や好みを切り替える設定スイッチ
  • オンボーディングや ToDo のチェックリスト
  • アンケートや料金プラン選択の単一選択肢
  • 利用規約・同意のチェックボックス

インタラクション別

アプリに追加する

React では react-useanimations をインストールしてアイコンをインポートするだけで、「クリックでトグル」のインタラクションで動きます。このカテゴリのアイコンはどれも使い方が同じなので、checkBox を各アイコンのページに載っている名前に置き換えてください。

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import checkBox from 'react-useanimations/lib/checkBox';

<UseAnimations animation={checkBox} size={32} />

shadcn/ui なら、CLI ですぐに使えるコンポーネントを追加できます：

npx shadcn@latest add https://useanimations.com/r/check-box.json
import { AnimatedCheckBox } from '@/components/animations/check-box';

<AnimatedCheckBox size={24} />

React を使わない場合も、各アイコンは /icons/<id>.json にある Lottie JSON ファイルとして使えます。Web、iOS、Android、Flutter 向けのプレーヤーは Lottie アイコンを参照してください。

よくある質問

フォーム部品のアニメーションアイコンにはどんなアイコンがありますか？

3 個あります。Checkbox、Radio button、Toggleです。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

フォーム部品のアニメーションアイコンを React で使うには？

react-useanimations をインストールし、import checkBox from 'react-useanimations/lib/checkBox' を追加して <UseAnimations animation={checkBox} size={32} /> をレンダリングします。アイコンは「クリックでトグル」のインタラクションで動き、テキストの色に合わせて表示されます。shadcn/ui を使う場合は、代わりに npx shadcn@latest add https://useanimations.com/r/check-box.json を実行してください。

フォーム部品のアニメーションアイコンは React なしでも使えますか？

はい。各アイコンは https://useanimations.com/icons/<id>.json（例：https://useanimations.com/icons/check-box.json）にある Lottie JSON ファイルで、lottie-web、lottie-ios、lottie-android、Flutter の lottie パッケージで再生できます。静的 SVG は各アイコンのページ（英語）からダウンロードできます。エクスプレッションを使うアイコンはないので、lottie-web のライトビルドで十分です。