300 icons · 20 categories
Animated icon categories
Every useAnimations icon belongs to one category, from navigation arrows and media controls to loaders and social media logos. Open a category for all of its icons, where to use them and the code to add one, or browse by interaction instead.
- Alerts5 iconsWarning triangles, alert circles and stop signs that pulse just enough to be noticed without flashing. Put them next to a failed form field, at the start of an error banner or in a status column, where a still icon is easy to scroll past.
- Notifications4 iconsBell icons that ring for new activity or switch between bell and bell-off. A short swing on the bell draws the eye to an unread count, and the toggling versions double as the mute control for a channel or thread.
- Navigation34 iconsHamburger menus that morph into a close button, arrows, chevrons and corner arrows that nudge in their direction on hover. They make it obvious which way a control leads: open the drawer, go back, expand the row, leave the site.
- Action64 iconsThe verbs of an interface: save, delete, download, refresh, like, bookmark, search and settings. Each one confirms the click or hover it belongs to, so a heart fills when you like a post and a trash can lid lifts before you delete.
- Content22 iconsFiles, folders, books, mail, attachments and people. They label the things a user works with, and the add, remove and check variants make list and team management feel responsive.
- Form3 iconsA checkbox, a radio button and a toggle switch that animate between their checked and unchecked states. Use them where a plain input feels flat, such as onboarding checklists and settings screens, while keeping the state readable at a glance.
- Media28 iconsPlay and pause, volume, microphone, camera, skip and shuffle for audio and video players. The toggling icons switch between their two states, play to pause or mic to muted, so the button always shows what a click will do.
- Text editing10 iconsBold, italic, underline, alignment and list icons for rich text toolbars. A quick click animation confirms the formatting was applied, which helps in editors where the change to the text itself is subtle.
- Communication13 iconsPhones, chat bubbles, send buttons, voicemail and RSS. The call icons cover the incoming, outgoing, missed and forwarded states a call log needs, and the send icon gives a message a small send-off on click.
- Devices12 iconsPhones, tablets, monitors, watches and printers, plus the connection indicators around them: wifi, Bluetooth and battery. They work for device pickers, responsive preview switchers and connectivity status.
- Weather16 iconsSun, moon, clouds, rain, snow, lightning and wind for forecasts and anything that follows the time of day. The sun and moon also make a natural light and dark mode switch.
- Maps & location9 iconsMap pins, navigation arrows, globes, targets and anchors. A pin that drops on hover helps a store locator or delivery address stand out, and the globe works as a language or region switcher.
- Commerce11 iconsShopping carts, bags, price tags, gifts, credit cards and delivery trucks for online stores. An add-to-cart animation confirms the click without a toast, and the truck and package icons give order status a little life.
- Charts5 iconsBar charts, a pie chart and trending arrows for analytics and reporting. The trending-up and trending-down icons show at a glance whether a metric rose or fell, which suits KPI cards and changelogs of numbers.
- Development9 iconsCode brackets, a terminal, Git branches, commits, merges and pull requests, plus servers and databases. Made for developer tools, documentation sites and status pages where Git and infrastructure terms are part of the interface.
- Design & layout10 iconsGrids, columns, layers, crop, pen tool and cursor icons for editors and builders. They fit toolbars where users arrange content, switch between grid and table views, or pick a drawing tool.
- Shapes & math8 iconsCircles, squares, triangles, hexagons, an octagon and division signs. Use them as shape tools in drawing apps, as calculator operators, or as neutral markers in diagrams and onboarding steps.
- Loading5 iconsSpinners and loaders that loop for as long as something is in progress. Put one inside a submit button while a request runs, in place of content that is still loading, or on a full-screen splash; they hold still when the user prefers reduced motion.
- Social media22 iconsBrand icons for social networks and the tools developers and designers share work on: X, Instagram, YouTube, Discord, Telegram, Figma and more. They animate on hover, which makes footer and profile links feel clickable.
- Other10 iconsIcons that do not belong to a larger group: emoji faces for feedback, a coffee cup, a clock, a pulse line and a scroll-down cue. The scroll-down icon is a common hero section hint that there is more below.