One of the most noteworthy things about css.gg is that each individual icon page displays the source code of how the icon was built. It includes more than 700 UI icons and it’s completely free. Ĭss.gg is a unique icon library that was written entirely in CSS. Then, use the special ion-icon component to render the icons. To use Ionicons, include its CDN link in your project. It comes in two versions: material design and iOS.Īlthough it was built for the Ionic framework, the icons are completely open-source and MIT-licensed, meaning you can use them as you see fit for any kind of project, personal or commercial. Ionicons is a high-quality icon library designed for use in web, iOS, Android, and desktop apps with support for SVG and web fonts. You can install Bootstrap Icons via npm or downloaded it manually.ĭepending on your setup, you can include Bootstrap Icons in a handful of ways: Bootstrap opted to use SVG-based icons at a time when Font Awesome was font-based.īootstrap Icons is currently in its alpha version with over 1,000 icons ready for use. Obviously, Bootstrap Icons are designed for Bootstrap’s components and documentations. The most popular CSS framework now has its own icon library as of version 4. If you’re worried about the size of your app, make sure to use the search bar on the homepage to find your icons individually instead of importing the entire library. It supports popular web development frameworks such as React, Angular, and Vue as well popular design tools such as Sketch and Adobe apps.įont Awesome also has a paid premium plan that includes 6,000 more icons with faster icon loading, more kits, more icons, more tools, and actual human technical support.ĭespite its huge collection, you probably won’t need more than a few icons for your application. The library includes a collection of more than 1,500 icons you can use for free. Font Awesome 5 set a record as the most funded software Kickstarter ever. It was originally designed for Bootstrap and later grew to become its own independent icon set. Font Awesomeĭeveloped in 2012 by Dave Gandy, Font Awesome is one of the oldest and most popular icon collections available. npm install feather-iconsįeather has third-party libraries that make it easier to use icons inside modern popular frameworks such as Angular, Vue, and React with little hassle. To use a Feather icon, install its package. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency, and flexibility.Īll the icons in Feather are SVG-based, meaning you can use them inside most HTML and CSS attributes, such as img, background-image, inline, object, embed, iframe, etc.Īt the time of this writing, Feather has a collection of 282 icons that you can tweak in terms of size, stroke width, and color. Featherįeather is a collection of clean, beautiful open-source icons that are generally used to help users navigate and operate applications. Best of all, they don’t cost a thing.īelow are the top 7 icon libraries you can use for free. These icon libraries are very simple to set up and they all allow you to import just the icon you need instead of the entire collection. In this tutorial, we’ll explore and compare some of the most popular icon libraries you can use in your next JavaScript project. In many cases, icons can even replace text entirely. Icons are useful precisely because they are universal symbols. For instance, a microphone icon in a web or mobile application almost always indicates some kind of voice command or recording functionality. Icons are recognized patterns that the vast majority of users are familiar with. As web developers, we use icons to make our websites and apps more visually appealing, navigable, and engaging.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |