Icons are a fantastic tool for building layouts that are quicker to interact with. They are often used because they are universal symbols. Icons are the crucial component of the user experience. They guide web visitors through complex interactions of the websites, so the developer must choose the right and best website icons.
So in this article, we will share some sites that will help you find the icons that best fit your website.
1. Feather Icons
Feather is a collection of beautiful open source icons. Each icon is designed on a 24 x 24 grid for hassle-free use. Feather emphasis more on simplicity and consistency. It allows the flexibility to perform the various modifications, including the icon size, stroke width, and color selection.
Key features:
- Free use of all 286 icons.
- Download the icons in SVG format.
- Icons are scalable and easily customizable with CSS.
To use a Feather icon, you can install the package or embed the CDN link.
2. Heroicons
Heroicons is a comprehensive library of unique icons for your marketing websites. It offers beautiful handcrafted 230 SVG icons designed by the makers of the Tailwind CSS. For the primary navigation and marketing section, the icon is created on a 24 x 24 grid. And for buttons and form elements, the icon is created on the 20 x 20 grid.
Key features:
- Free use of all 230 icons.
- Download icons in SVG and JSX format.
- MIT licensed high-quality icons.
- Icons are scalable and easily customizable with CSS.
To use the Heroicons, you can install the React and Vue package or copy the source of each icon and embed it into your HTML file.
3. CSS.gg
Css.gg is a comprehensive library offering over 700+ free UI icons. It was written entirely in CSS. One of the best things about css.gg they provide the complete CSS source code of each icon, showing how the icon was built. It allows the flexibility to perform the various modifications, including the icon size and color selection.
Key features:
- Free use of all 700+ icons.
- Download icons in different formats: CSS, SVG, FIG, XML, XD, JSON, and TSX.
- Source code of every icon is available.
- Icons are scalable and easily customizable with CSS.
To use the css.gg icons, you can install the package or embed the CDN link, download the SVG, or use the reacts component.
4. Ionicons
Ionicons offers open-source premium designed icons for the web, iOS, and android. It supports SVG and web fonts.
Key features:
- Free use of all 504 icons.
- Download icons in SVG format.
- MIT licensed high-quality icons.
- Icons are scalable and easily customizable with CSS.
To use Ionicons, include its CDN link in your project.
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
Then, use the special ion-icon component to render the icons.
5. Lordicon
Lordicon is a powerful, comprehensive library that provides 1700 animated icons. It offers 280 free animated icons and that of 46 categories. It allows the flexibility to perform the various modifications, including stroke width, x-axis, y-axis, and color selection. Lordicon has four types of icons: hover, morph, loop and accents.
Key features:
- Free use of all 280 icons.
- Download icons in various formats: HTML, SVG, JSON, GIF, AEP, PNG, and EPS
To use the Lordicon, copy the source of each icon and embed it into your HTML file.
Hopefully, you found all the loved all the website icons site we mentioned above. Now it’s your turn to list out the sites you use for your website.
Happy Coding!
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
