Shulou(Shulou.com)05/31 Report--

This article mainly explains the "open source SVG icon library what are", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "open source SVG icon library what are" it!

Font Awesome

I believe most of us have used Font Awesome icons at least once, until now, because they were one of the first highly popular open source icon libraries to be released. So far, they have a total of 1588 free icons and 7842 professional icons in their gallery.

One of the main reasons why Font Awesome is still widely used may be that they provide a large variety of icons. Our site actually uses Font Awesome Pro's two-tone icon, which we believe makes our site more distinctive than other similar sites.

Another interesting feature is that Font Awesome provides a personalized CDN link. If you create an account, you can generate a personalized CDN link. In this way, you can conditionally exclude regular icons and use only duotone icons.

Of course, you can also choose to include only a few icons by directly copying and pasting SVG code, and if you use no more than 20-30 icons on the site, I suggest you do so.

In summary, there are many ways to use Font Awesome, such as copying the SVG source code for a single icon, downloading libraries, or using public or your own CDN. Their pages are great and can help you get started with Font Awesome.

Ionicons

Ionicons.io is another SVG-driven open source icon library with 457 separate icons in three different styles: outline, fill, and sharpness. I especially like the simplicity of outline and shape design. I definitely suggest you try it for the next project.

If you want to use ionicons instead of just using a separate SVG, you can add the following script to the footer.

Then, simply add the following elements to the HTML template, and then change the name property to match the icon you want to display, as follows:

CSS.gg

If you are an active member of the Reddit developer community, you may notice that a new icon library has been released that uses only CSS for styling. Currently, it has 704 separate icons based on reminders, arrows, code, design, etc.

There was some debate about whether to use CSS or SVG for better performance, but @ astritmalsija, the creator of the library, later released version 2 of the SVG, SVG Sprite, Figma, and Adobe XD formats to provide a broader implementation.

Starting with CSS.gg is as easy as running the npm-I css.gg command, and later include the following stylesheet in the head tag:

Of course, there are alternatives to CDN, such as using UNPKG or JSDelivr, as follows:

Feathericons

Feathericons is another very beautiful and clean icon library, containing 282 SVG icons. By default, it is only in SVG as the main format, but that doesn't matter, because this is currently the recommended way to use icons, because it is the fastest.

I like to configure the size, stroke width, and color of the icon before downloading it. You can also switch between shading and shading by clicking the moon icon in the upper right corner of the site.

Getting started with Feathericons is as easy as downloading an SVG file and including it in a tag by using src or using it as an embedded SVG object.

Eva Icons ❤️

Eva Icons is a set of 480 beautifully crafted open source icons available in SVG and PNG formats. There are two main contours and filling styles. What I like is that you can choose animation that zooms, pulsates or shakes out of the box when hovering.

The way to get started with Eva Icons is as simple as downloading the SVG or PNG file and selecting the icon to use or downloading the complete set of icons. You can also include Eva Icons by installing the NPM package, as follows:

Npm i eva-icons

Heroicon

Heroicons is another great open source icon library built by the creators of Tailwind CSS. It has more than 165 separate icons with fill and outline styles, but each element is also available in dark and white versions. The appearance of the icon is very high-quality and well-made.

Getting started with these icons is as simple as clicking one of the icons and copying inline SVG code that can be used immediately in the project. I like that they also provide libraries in Figma. If you want to include all the icons, you can download all the SVG files from the public repository.

Bootstrap icons

A few weeks ago, I compared the new Bootstrap 5 icon to Font Awesome. Currently, it has more than 600 custom icons driven by SVG, and I think it is really excellent in design. If you like to use Bootstrap as a CSS framework, you should consider using the Bootstrap 5 icon for your next project.

Starting with the Bootstrap 5 icon is as simple as copying SVG code, and then you can use it as you see fit, whether inline, using it as the source code of the image, or creating pseudo-code classes in CSS. Either way, their website clearly explains the implementation.

Remix Icon

Remix Icon is a large collection of 2149 beautiful open source icons under Apache License. There are a variety of icons to choose from, such as business, communications, finance, maps and so on. It's definitely worth seeing.

Remix Icon is easy to use by downloading the SVG or PNG version, or by copying the embedded SVG code directly to the clipboard. Alternatively, you can choose to download the entire package as a single .svg file or SVG Sprite file.

Octicons

Octicons is a set of more than 100 open source icons, which Github also uses for its main website. Obviously, they are already developing the second version of the library by improving the design and variety of icons.

One of the great advantages of Octicons is that you can also use it as a ready-to-use package in React,Ruby,Rails,Jekyll and Javascript.

Ikonate

Last but not least, Ikonate is another awesome open source icon library with about 100 advanced icons based on graphic design. It is granted generously under a very lenient MIT license.

Before exporting, you can easily configure the size, border width, border and corner, and color of the icon. In the export ZIP file, you will get a html file with all selected embedded icons, as well as a folder containing a separate SVG file and a sprite image.

Thank you for your reading, the above is the "open source SVG icon library what" the content, after the study of this article, I believe you have a deeper understanding of the open source SVG icon library what this problem, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.