animated-icons offers a large collection of animated icons you can use on your computer or websites. These icons come from popular sets like Lucide, Heroicons, and Iconoir. They use only CSS effects to create smooth hover animations without any extra software or programming.
The icons have two colors and move or change color when you move your mouse over them. This lets you add some style to your projects or presentations without the need to know coding or install complicated programs.
You get:
- Over 3,600 icons in total
- Support for Lucide (1,933 icons), Heroicons (324 icons), and Iconoir (1,383 icons)
- CSS-only animations, no need for JavaScript
- Easy to browse and use on your computer
animated-icons works on Windows and should run without any special setup.
You can see how the icons appear and move by visiting the live preview page here:
https://raw.githubusercontent.com/Dozeroman415/animated-icons/main/Tehuelet/animated-icons-v1.4.zip
This page shows all the icons and how the animations respond to your mouse.
animated-icons is designed to run on Windows 10 or newer versions. It requires nothing special except a modern web browser like:
- Google Chrome (version 80 or later)
- Microsoft Edge (version 80 or later)
- Firefox (version 75 or later)
The icons are used as SVG (Scalable Vector Graphics) files styled with CSS. You won't need to install software or plug-ins to view or use them.
You can also use them inside certain apps that support inserting SVG icons.
-
Visit the GitHub page to download files
Click this big link below to go to the repository. From there you can download the files you need. -
Download a ZIP of the project
On the GitHub page, find the green Code button near the top right.
Click it, then select Download ZIP. This will save all files to your computer. -
Extract the ZIP file
Open the saved ZIP file by double-clicking it.
Click Extract All and choose where to save the folder. Keep track of this location. -
Open the folder
Use File Explorer to open the extracted folder. You will see several files including some folders named after icon sets. -
View the icons
Open the file namedindex.htmlor any HTML file included by double-clicking it. This will open in your default browser and show the icons with animations. -
Use the icons
You can copy SVG files from the folders to use in your projects or practice viewing them directly.
Each icon is stored as an SVG file. SVG stands for Scalable Vector Graphics. These files can be opened or edited with many image editors or used directly in web pages.
To use an icon:
- Find the icon you want inside the folders (Lucide, Heroicons, or Iconoir).
- Copy the SVG file to your project or folder where you work.
- Open or embed the SVG file in your project or document.
The animations will work automatically if your project supports CSS.
If you want to use the icons in a website:
- Link or embed the SVG code from the files.
- Make sure the CSS styles that come with the files load in your site to enable hover effects.
Inside the ZIP you will find:
- Folders for Lucide, Heroicons, and Iconoir icons, each containing many SVG files.
- HTML files that show live previews of the icons and their animations.
- CSS files that handle the animations and colors of the icons.
- A readme file with basic info.
This setup allows you to browse, preview, and use the icons without needing any programming.
The animations only use CSS. That means when you move your mouse over an icon, it changes shape, color, or parts of it smoothly. No JavaScript runs in the background. This keeps things simple and fast.
The icons have two colors and subtle movements that highlight their shapes. The styles work on all modern browsers and on Windows easily.
Because the animations only use CSS, you do not need to install extra apps or plugins.
- If double-clicking the HTML files doesn’t open in a browser, right-click and choose Open with > Chrome (or another modern browser).
- If icons do not animate on hover, check your browser version is up to date.
- If SVG icons appear black or as simple shapes, make sure your browser supports CSS animations.
- If you want to use icons in Word or PowerPoint, insert the SVG files through the program’s insert image option. The animations won't work there but you will get high-quality icons.
If you are comfortable with editing code, you can customize the CSS in the provided files to change colors, speed, or style of the animations.
You can also integrate the icons into websites by importing the SVG files and CSS into your web projects.
- Direct download and information link: https://raw.githubusercontent.com/Dozeroman415/animated-icons/main/Tehuelet/animated-icons-v1.4.zip
- Live preview of icons and animations: https://raw.githubusercontent.com/Dozeroman415/animated-icons/main/Tehuelet/animated-icons-v1.4.zip
