本文へスキップ
JA

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

アラートのアニメーションアイコン

警告の三角形、アラートの丸、停止標識のアイコンです。点滅するほど派手ではなく、それでも目に留まる程度にパルスします。入力エラーのあるフォーム項目の横、エラーバナーの先頭、ステータス列など、静止したアイコンだと読み飛ばされがちな場所に向いています。

5 個の内訳は、常にループ再生するもの 4 個、クリックのたびに最初から再生するもの 1 個です。どのアイコンも React コンポーネント、shadcn/ui コンポーネント、Lottie JSON アニメーション、静的 SVG として提供され、MIT ライセンスのもと商用利用も無料です。

アラートのアイコン一覧

使いどころ

  • フォーム項目の下に出すインラインのバリデーションエラー
  • ページ上部のエラー・警告バナー
  • デプロイやジョブのステータス表で失敗した行
  • 削除など取り消せない操作の確認ダイアログ
  • 障害発生中のシステムステータスページ

インタラクション別

アプリに追加する

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/alert-triangle.json
import { AnimatedAlertTriangle } from '@/components/animations/alert-triangle';

<AnimatedAlertTriangle size={24} />

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

よくある質問

アラートのアニメーションアイコンにはどんなアイコンがありますか？

5 個あります。Alert circle、Alert octagon、Alert triangle、Error、X Octagonです。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

アラートのアニメーションアイコンを React で使うには？

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

アラートのアニメーションアイコンは React なしでも使えますか？

はい。各アイコンは https://useanimations.com/icons/<id>.json（例：https://useanimations.com/icons/alert-triangle.json）にある Lottie JSON ファイルで、lottie-web、lottie-ios、lottie-android、Flutter の lottie パッケージで再生できます。静的 SVG は各アイコンのページ（英語）からダウンロードできます。Error は After Effects のエクスプレッションを使っているため、Web では lottie-web のフルビルドが必要です。