10 ikon · licence MIT

Další animované ikony

Ikony, které nepatří do žádné větší skupiny: smajlíci pro zpětnou vazbu, šálek kávy, hodiny, křivka pulzu a výzva k posunu dolů. Ikona posunu dolů je v úvodní sekci webu (hero) běžnou nápovědou, že pod ní je další obsah.

Kategorie obsahuje 10 ikon: 4 se přehrávají ve smyčce a 6 se při najetí myší jednou přehraje. Každá ikona je k dispozici jako React komponenta, komponenta pro shadcn/ui, Lottie JSON animace a statické SVG, zdarma i pro komerční použití pod licencí MIT.

Všechny ikony v kategorii Ostatní

Kde je použít

Výzvy k posunu dolů ve spodní části úvodní sekce
Veselé, neutrální a smutné obličeje ve widgetech zpětné vazby
Indikátory aktivity a dostupnosti
Otevírací doba a výběr času
Odkazy Buy Me a Coffee a na podporu projektu

Podle interakce

Animované ikony ve smyčce · 4
Přehrává se nepřetržitě; když uživatel preferuje omezený pohyb, zůstane na statickém prvním snímku. Activity, Arrow down, Arrow up, Scroll down.
Animované ikony s přehráním při hoveru · 6
Při najetí myší (mouseenter) se jednou přehraje, pokud uživatel nepreferuje omezený pohyb. Odjetí myši ji nezastaví a nové najetí během přehrávání ji nespustí znovu. Clock, Coffee, Frown, Meh, Smile, Tool.

Přidejte ikonu do aplikace

V Reactu nainstalujte react-useanimations a naimportujte ikonu; svou interakci „smyčka“ přehraje sama. Všechny ikony v této kategorii fungují stejně: scrollDown jen nahraďte názvem ze stránky požadované ikony.

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import scrollDown from 'react-useanimations/lib/scrollDown';

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

Se shadcn/ui vám CLI přidá hotovou komponentu:

npx shadcn@latest add https://useanimations.com/r/scroll-down.json

import { AnimatedScrollDown } from '@/components/animations/scroll-down';

<AnimatedScrollDown size={24} />

Nepoužíváte React? Každá ikona je Lottie JSON soubor na adrese /icons/<id>.json; přehrávače pro web, iOS, Android a Flutter popisuje stránka Lottie ikony.

Časté dotazy

Které další animované ikony sada obsahuje?

10 ikon: Activity, Arrow down, Arrow up, Clock, Coffee, Frown, Meh, Scroll down, Smile a Tool. Všechny můžete zdarma používat v osobních i komerčních projektech pod licencí MIT, bez nutnosti uvádět autora.

Jak použít další animované ikony v Reactu?

Nainstalujte react-useanimations, přidejte import scrollDown from 'react-useanimations/lib/scrollDown' a vykreslete <UseAnimations animation={scrollDown} size={32} />. Ikona přehraje svou interakci „smyčka“ a převezme barvu textu. Se shadcn/ui místo toho spusťte npx shadcn@latest add https://useanimations.com/r/scroll-down.json.

Můžu další animované ikony použít i bez Reactu?

Ano. Každá ikona je Lottie JSON soubor na adrese https://useanimations.com/icons/<id>.json (například https://useanimations.com/icons/scroll-down.json), který přehraje lottie-web, lottie-ios, lottie-android nebo balíček lottie pro Flutter; statická SVG najdete na stránce každé ikony (stránky ikon jsou v angličtině). Žádná z nich nepoužívá výrazy (expressions), takže stačí light build lottie-web.