How to use Lordicon: The Best Animated Icon Library
Tags: icons, ux, animations, design
Published: 2023-04-06 12:02:51

As a developer, I understand the importance of icons in creating visually appealing and user-friendly websites and applications. However, with the multitude of icon libraries available, choosing the right one for my coding projects has always been a challenge. Every library comes with its unique features, styles, and customizations, and selecting the wrong one can result in a poor user experience or a project that doesn't meet the desired outcome. 

If you've ever faced this dilemma, then you know how time-consuming and frustrating the process of choosing an icon library can be. But fear not! In this article, I'll share my experience using Lordicon, a versatile and widely used icon library, to help you make an informed decision for your next coding project.


![Animated Icon By Lordicon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su753y3n9jd7yybtcsvb.gif)


`Lordicon` is a library of well-crafted animated icons that are ready for use in various digital products, presentations, or videos. With thousands of free and premium icons available in six different styles, Lordicon offers a wide range of options to suit various design needs.

What i like most about this library is that it has a lot of customization options that allows you to adjust colors, stroke width, animation speed and many other to match your project's specific design requirements.

Icons are of six styles. `Wired lineal, wired flat, wired outline, wired gradient, system outline and system solid`. The Wired styles offer a more modern, sleek appearance, while the System styles have a more traditional, familiar look that may suit some projects better.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okjazx899d9zkfzrx5j7.jpg)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivku7pw9cb2953h78ba2.jpg)

Its pretty simple to get an animated icon here, simply click on the Icons link, then select the type of style you want to use. At the top left you can select either premium or free icons.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2gjuvziy0bcytcsro8r.jpg) 

Once you have selected an icon, you can modify it according to the many options available. With Lordicon's customization options, you can select the size you want, the type of animation motion, and the colors, scale, stroke width, and media type that fit your specific design needs. This level of customization allows you to create icons that truly match the aesthetic and functional requirements of your project.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft30bh7xjmevfrg5syrk.jpg)

Customization is a key feature of the library, and it extends to the animation of the icons as well. When you select an animation format, you can further customize it by choosing to set a background color or leave it transparent, adjusting the size of the animation, and selecting the delay between animation loops.

 This level of control over the animation ensures that you can create the perfect animated icon for your project, and that it fits seamlessly into your website or app's design. Moreover, the customization process is simple and easy to use, even for those who are not animation experts.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcewyfqzcndcpdv06az8.jpg)

By clicking the download button you will have your well crafted animated icon.

In conclusion, Lordicon provides a versatile tool for designers, developers, and content creators alike. Whether you are looking to spruce up your website, create engaging presentations, or add a professional touch to your videos, Lordicon is a fantastic choice. So why not give Lordicon a try and see how it can take your design to the next level?

Thank you for reading, and I hope you found this article helpful in understanding the many features and benefits of Lordicon. Have a great day!