本文へスキップ
JA

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

図形・数学記号のアニメーションアイコン

円、正方形、三角形、六角形、八角形、割り算の記号です。描画アプリの図形ツール、電卓の演算子、図やオンボーディングの手順で使う主張しすぎない目印として使えます。

8 個すべてがホバーで 1 回再生するアイコンです。どのアイコンも React コンポーネント、shadcn/ui コンポーネント、Lottie JSON アニメーション、静的 SVG として提供され、MIT ライセンスのもと商用利用も無料です。

図形・数学のアイコン一覧

使いどころ

  • ホワイトボードや描画アプリの図形ツール
  • 電卓や数式エディターの演算子
  • 図の中の箇条書きやステップの目印
  • クイズやゲームの画面

インタラクション別

  • ホバーで再生するアニメーションアイコン · 8

    モーション軽減が有効でなければ、mouseenter で 1 回再生します。離れても止まらず、再生中にもう一度乗っても最初からにはなりません。Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle.

アプリに追加する

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/hexagon.json
import { AnimatedHexagon } from '@/components/animations/hexagon';

<AnimatedHexagon size={24} />

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

よくある質問

図形・数学記号のアニメーションアイコンにはどんなアイコンがありますか？

8 個あります。Circle、Divide、Divide Circle、Divide Square、Hexagon、Octagon、Square、Triangleです。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

図形・数学記号のアニメーションアイコンを React で使うには？

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

図形・数学記号のアニメーションアイコンは React なしでも使えますか？

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