300 ikon · 20 kategorií

Kategorie animovaných ikon

Každá ikona useAnimations patří do jedné kategorie, od navigačních šipek a ovládání médií po loadery a loga sociálních sítí. V kategorii najdete všechny její ikony, tipy, kde je použít, a kód pro přidání ikony do projektu. Ikony můžete procházet i podle interakce.

Upozornění5 ikonVýstražné trojúhelníky, kroužky s vykřičníkem a značky stop, které pulzují tak akorát, aby si jich uživatel všiml, ale neblikají. Patří k chybnému poli formuláře, na začátek chybového banneru nebo do sloupce se stavem, kde se statická ikona snadno přehlédne.
Notifikace4 ikonyZvonky, které zazvoní při nové aktivitě nebo se přepínají mezi zvonkem a přeškrtnutým zvonkem. Krátké zhoupnutí zvonku přitáhne pozornost k počtu nepřečtených zpráv a přepínací varianty zároveň poslouží jako ztlumení kanálu nebo vlákna.
Navigace34 ikonHamburger menu, které se promění v tlačítko pro zavření, a šipky, chevrony i rohové šipky, které se při najetí myší posunou svým směrem. Je z nich hned jasné, kam ovládací prvek vede: otevřít panel, vrátit se zpět, rozbalit řádek, odejít z webu.
Akce64 ikonSlovesa rozhraní: uložit, smazat, stáhnout, obnovit, lajknout, přidat do záložek, hledat a nastavení. Každá ikona potvrdí kliknutí nebo hover, ke kterému patří: srdce se po lajknutí příspěvku vyplní a koši se před smazáním nadzvedne víko.
Obsah22 ikonSoubory, složky, knihy, pošta, přílohy a lidé. Označují věci, se kterými uživatel pracuje, a díky variantám pro přidání, odebrání a zaškrtnutí působí správa seznamů a týmů živě.
Formuláře3 ikonyZaškrtávací políčko, přepínač (radio button) a vypínač, které animují přechod mezi zaškrtnutým a nezaškrtnutým stavem. Hodí se tam, kde obyčejný input působí ploše, třeba v onboardingových checklistech a v nastavení, a stav je přitom pořád čitelný na první pohled.
Média28 ikonPřehrát a pozastavit, hlasitost, mikrofon, kamera, přeskočení a náhodné pořadí pro audio a video přehrávače. Přepínací ikony střídají své dva stavy, přehrát a pauza nebo mikrofon a ztlumení, takže tlačítko vždy ukazuje, co kliknutí udělá.
Úpravy textu10 ikonTučné písmo, kurzíva, podtržení, zarovnání a seznamy pro panely nástrojů editorů formátovaného textu. Krátká animace po kliknutí potvrdí, že se formátování použilo, což pomáhá v editorech, kde je změna samotného textu nenápadná.
Komunikace13 ikonTelefony, chatovací bubliny, tlačítka pro odeslání, hlasová schránka a RSS. Ikony hovorů pokrývají příchozí, odchozí, zmeškané a přesměrované hovory, které výpis hovorů potřebuje, a ikona odeslání zprávu po kliknutí krátce „vypustí“.
Zařízení12 ikonTelefony, tablety, monitory, hodinky a tiskárny a k nim indikátory připojení: wifi, Bluetooth a baterie. Hodí se do výběru zařízení, přepínačů náhledu responzivního zobrazení a stavu připojení.
Počasí16 ikonSlunce, měsíc, mraky, déšť, sníh, blesky a vítr pro předpovědi a všechno, co se řídí denní dobou. Slunce a měsíc navíc přirozeně poslouží jako přepínač světlého a tmavého režimu.
Mapy a poloha9 ikonŠpendlíky na mapě, navigační šipky, glóby, terče a kotvy. Špendlík, který při najetí myší dopadne na místo, zvýrazní vyhledávač poboček nebo doručovací adresu a glóbus funguje jako přepínač jazyka nebo regionu.
E-commerce11 ikonNákupní košíky, tašky, cenovky, dárky, platební karty a dodávky pro e-shopy. Animace přidání do košíku potvrdí kliknutí i bez toast notifikace a ikony dodávky a balíku dodají stavu objednávky trochu života.
Grafy5 ikonSloupcové grafy, koláčový graf a trendové šipky pro analytiku a reporty. Ikony rostoucího a klesajícího trendu ukážou na první pohled, jestli metrika stoupla, nebo klesla, což se hodí do KPI karet a přehledů změn v číslech.
Vývoj9 ikonZávorky kódu, terminál, větve v Gitu, commity, merge a pull requesty a k tomu servery a databáze. Vytvořené pro vývojářské nástroje, dokumentace a stavové stránky, kde jsou pojmy z Gitu a infrastruktury součástí rozhraní.
Design a layout10 ikonMřížky, sloupce, vrstvy, oříznutí, pero a kurzor pro editory a page buildery. Patří do panelů nástrojů, kde uživatel skládá obsah, přepíná mezi zobrazením mřížky a tabulky nebo vybírá kreslicí nástroj.
Tvary a matematika8 ikonKruhy, čtverce, trojúhelníky, šestiúhelníky, osmiúhelník a znaky dělení. Použijte je jako nástroje tvarů v kreslicích aplikacích, jako operátory kalkulačky nebo jako neutrální značky v diagramech a krocích onboardingu.
Načítání5 ikonSpinnery a loadery, které běží ve smyčce, dokud něco probíhá. Dejte je do odesílacího tlačítka, dokud čekáte na odpověď požadavku, místo obsahu, který se ještě načítá, nebo na celoobrazovkovou úvodní obrazovku. Když uživatel preferuje omezený pohyb, zůstanou v klidu.
Sociální sítě22 ikonIkony značek sociálních sítí a nástrojů, na kterých vývojáři a designéři sdílejí svou práci: X, Instagram, YouTube, Discord, Telegram, Figma a další. Při najetí myší se animují, takže odkazy v patičce a v profilech působí jasně klikatelně.
Ostatní10 ikonIkony, 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.