Vector svg icons. How to Implement Cross Browser SVG Icons
PSD icons are an indispensable element of any UI design, not inferior in importance even to fonts, however, in practice, rarely does anyone develop their own icons for each web project. On the other hand, it also takes a lot of time to search for icons of suitable quality and design, but today we decided to help you and prepared a selection of free icon sets for all occasions.
01.Icons8
Icons8 is a set of 20 thousand flat icons in any format, size and color! Here you can find categories such as business, clothing, food and many others. Icons8 can be downloaded as a Mac app or as a ZIP archive.
02. Freepik
A bright collection of vector icons from a specialized resource Freepik is just one of the many presented. It is ideal for business and independent projects. Additionally, you can download PSD icons in .AI, .EPS and .SVG formats.
03. Iconfinder
Designed in black and white, this set contains a combination of clear functional and emotional vector icons. In addition to the standard icons, this set contains icons in the form of hearts and eyes, which will allow you to give your own projects an emotional color.
04. 195 flat flag PSD icons
An excellent website PSD icon set that can be used in the development of an international website, online store or travel blog. The set includes 195 free icons with rounded corners.
05.Metro UI Icon Set
If you are a fan of Windows 8, then you should check out this free icon pack. It includes 700 well-designed icons that can be freely applied to any type of project.
06. Modern UI Icons
Another set of free icons that you can use when creating your user interface software for Windows or Android/iOS. By downloading this set, you'll get 1000 hand-drawn flat icons, including even icons for the Windows Phone app drawer.
07. 350 pixel perfect icons
Incredible set of 350 perfectly crisp icons for apps or websites. However, they can be resized without loss of quality.
08.80 mini icons
80 perfectly crisp miniature icons that can be downloaded both in PSD format and as an iconic font. These neat and sophisticated social PSD icons are perfect for any type of project.
09. Simple and practical web icon vector graphic
Lots of useful icons to use in personal and commercial projects.
10. Free flat icons
Set of flat style icons including calendar, email, clock, maps and more.
11.Mono icons
A set that includes 108 unique monochrome icons made in a minimalist style. All of them are available in PNG format at a size of 32 by 32.
12. Metric icons
A free Metro style collection that you can use in your own apps and web projects. PSD social media icons are free for both personal and public commercial use. The archive contains not only PSD , SVG , ESP and AI formats, but also web fonts.
13. Tab Bar Icons iOS 7
An elegant icon pack inspired by iOS 7 that you can use in your own apps. You can download icons in the following formats: PSD, AI and ESP.
14 Chunky Pika Icon Set
Pika style icons created by Dutch Icon agency from Denmark. This set includes 42 perfectly clear icons.
15. Iconic
Another set of simple yet eye-catching icons perfect for minimalist designs. Iconic is an open source set that can be downloaded in PNG , SVG , SWC and other formats, allowing you to adapt them to your own designs.
16. 44 Shades of Free Icons
Set of 44 icons. It contains PSD icons for the forum, which will allow you to easily edit and adapt them to your own projects.
17. Token icon set
Token includes 128 unique icons available in 16x16px, 32x32px and 256x256px ICO format and 128x128px PNG format. Each icon comes in dark and light versions, and is complete with a .psd file.
18. Flat Icons (PSD)
Colorful icons in a flat style that you can download in PSD format and edit to your own needs.
19. Free 32px icons set
A set in which you will find a PSD icon for any purpose: Skype , Facebook , Twitter , RSS , a cup of coffee, “like” and much more.
20. 48 flat designer icons
If you are a fan of minimalism, then you will definitely like this set. It consists of 48 free icons representing office tasks, social aspects, and travel. All of them are presented in AI and PNG formats, and they can be scaled without loss of quality.
21.Plex icons set
The set includes over 100 icons, including calendars, antivirus, clock, Email, applications Microsoft Office , social networks and much more.
22. Vectory mini free
A set of over 1000 PSD icons designed by the Icojam team. All of them are also in PNG format. They are ideal for use when developing a new site, as they are free to use in both personal and commercial projects.
23. Eldorado mini free
Another collection of mini icons from Icojam, featuring over 1200 icons in 40 x 40 pixels.
In this post, I will demonstrate how to implement SVG icons, how to implement fallback, and how to turn icons into an SVG sprite.
Basic integration of SVG elements
Especially for this tutorial, I will use one page that will work like an online business card. I will briefly present my services and show three profiles from professional networks related to my work. We will be using SVG icons.
You can see from the screenshot above that I'm using icons (Twitter, Dribbble and GitHub) to symlink to my work profiles. I downloaded these icons from flaticon , which had a lot of different icons and symbols in vector and raster formats.
png and svg
We'll start by using the PNG versions of these icons, for compatibility with previous versions, and then prepare SVG icons to work in supporting browsers.
I used Sketch to get the PNG icons, and I'll use it again to prepare the SVG icons.
If you look at the screenshot above, you'll notice that I've named all the groups and shapes in the left panel accordingly (Adobe Illustrator has the same list in the Layers panel). It is very important to name all sources correctly, this will not only help to organize the project well, but will also help in the subsequent steps of this tutorial.
Export SVG versions
Now I'm exporting the icons as SVG icons, this is very easy to do with Sketch's slicing tool. For a more detailed description of how this option works, check out Understanding Sketch's Export Options. I will export them as individual files and put them in the images folder in my project.
Normally, to display an image on a site, you link to the source using an element with a src attribute or something similar:
But with SVG files, there are several other ways that can be used in an HTML document. For example, you can use the SVG code directly - here's what it should look like:
This is one of the icons I exported, in XML format. This code is very similar to HTML (it's a structured format), which means we can embed it right into the page.
Adding SVG to HTML
Let's start with a basic HTML page, which includes PNG icons with their anchors, and a container:
And now I'll copy and paste the SVG code, although I'll ignore the top line, which refers to the nature of the file's embedding and other attribute details. The HTML document already contains information that need not be duplicated.
I placed the SVG directly above the corresponding PNG icons in the HTML page. On the this moment I'll wrap the line with the regular PNG image in a comment tag so it doesn't appear next to the SVG version
Cleaner SVG
I will also clean up the code in my SVG. Removing the attribute elements is optional since most of the fragments I remove won't change the behavior of the SVG. Here is the code before and after, in case you want to do the same:
See what items I removed. The elements
Then I need to place the icons there. I don't need to wrap the whole SVG, I just need the group element with its content. I can embed this in an element
Note: If you're comfortable using Grunt, here's a plugin that automates the merging of all individual SVG files.
Hide!
Now we have all the SVG icons in the head and we need to hide them; add the attribute display=”none” to the new svg> which means no icon will appear at the top of the page.
Defining each SVG icon
The next step is to define each icon so that we can use it on the page where we previously removed the defs element. With this tag to wrap all the groups, by wrapping all the icons accordingly, I can indicate that I want to reuse them anywhere on the page.
How to use SVG icons
The icons are now defined, but we also need to specify a method for using them, and for this we will take the use element. Element
If you did everything like I did and didn't make any mistakes, you won't see any changes in how the graphics are rendered, but now you can reuse SVG icons (at whatever size you want) and call each one as many times as you like on the page.
Improving Our SVG Sprite
Another benefit to using SVG sprites is that the page code is much cleaner and easier to read for other people who are also working on the site. We can improve the result a little more. Below I have replaced the elements
Usage
By changing the group element to symbol. We can implement all these improvements. You can delete an element
Conclusion
Well, what started as simple raster icons has evolved into a super-powerful vector graphics set that can be easily applied where needed and in any size needed. I hope you found this tutorial useful and that you continue to experiment and create SVG icons in your next project.
Tags: , ,Preparing an SVG for use on the web is a very simple process, no more difficult than exporting a JPEG or PNG. Use whatever image editor you're used to (Illustrator, Sketch, Inkscape [free], etc. [or even Photoshop if you're using shape layers]) at the image size you plan to use. I usually work in Illustrator, so I will explain some of the ways to prepare files in this program, but in general they are applicable to any other program. You might want to convert the text to outlines as the font will most likely not render correctly unless you plan to style them with the web font used on the page of course (which is possible!). It's also not a good idea to turn all objects into single shapes, especially if you have a stroke that you will need to control on the page, especially since converting objects often does not reduce the file size. Any names given to groups or layers will be added to the SVG as an element ID. This is pretty handy for styling, but will slightly increase the overall file size.
Before exporting, you need to check if all images are in an integer pixel grid (that is, for example, not 23.3px × 86.8px ). AT otherwise most likely the image will not have enough clarity and part of the image will be cut off. In Illustrator this can be done like this: Object > Artboards > Fit to Artwork Bounds . Then click save as and select SVG , and leave the default settings. There's a little bit of optimization to do here, but not really worth it, as we'll be applying various enhancements later on, so we won't waste time on those tweaks for now.
Techniques for reducing file sizes.
(See optimization)
To achieve the smallest SVG size, it would be logical to remove everything unnecessary from it. The most famous and useful program(at least I think so) for SVG processing it is SVGO . It removes all unnecessary code. But! Be careful using this program if you plan to manipulate SVG when CSS help/ JS , as it can clean up the code too much, making further changes difficult. The convenience of SVGO is also that it can be included in the automatic build process of the project, but you can also use GUI if you want.
Understanding in more detail with the correct removal of all unnecessary, we can do something else in graphics editor. First you need to make sure that you use as few paths/shapes as possible, as well as points on these paths. You can combine and simplify everything that can be simplified, and remove all unnecessary points. Illustrator has a VectorScribe plugin with the Smart Remove Brush Tool that will help you remove dots while still keeping the overall shape the same.
Pre-optimization
Smart Remove Brush Tool removed dots
Next, we will enlarge the image. In Illustrator, it is convenient to turn on the pixel grid view View > Pixel Preview and check how the paths are arranged. It will take a bit of time to place the paths on the grid, but the effort will pay off and result in a sharper rendering (it's better to pay attention to this in advance).
Points outside the grid
Grid alignment
If there are two or more objects to align, then it is worth removing all unnecessary overlaps. Sometimes, even if the contours are carefully aligned, a thin white line may be visible. To prevent this, you can slightly overlay objects on top of each other in places of overlap. Important: In SVG, z-index has a certain order that depends on the object that is on the bottom, so it's worth putting the top object at the bottom of the file in the code.
And finally, last but not least, something that is usually forgotten is to enable gzip compression of SVGs on your site in the .htaccess file.
AddType image/svg+xml svg svgz
As an example of how effective this technique is, I'll take the original Breaking Borders logo and optimize it this way: increase the size to what it should be; I will put in order the contours; I will delete the maximum possible number of points; move points by integer pixels; move all overlap areas and send it all to SVGO .
Original: 1,413b
After optimization: 409b
As a result, the file size became ~ 71% smaller (and ~ 83% smaller when compressed)
The icons you find on these resources can also be used to illustrate information in a slideshow, decorate Business Cards, menus, flyers and more.
We wrote that the icons on these sites are free, but still pay attention to the download conditions, as they can change at any time.
01. Smashing Magazine
22.PixelsMarket
26.Blugraphic
Blugraphic - PSD, PNG and vector icon options. The search is limited to tags, but you can subscribe to the newsletter and receive weekly free selection by email.
27 Icon Shock
Icon Shock is thousands of free icons for personal use. To use an image in a commercial project, you need to make a one-time payment.
28. CSS Author
CSS Author offers weekly selections of the best free icons on the web.
29. Creative Tail
Want fresh icons? There are kits on Creative Tail that you won't find anywhere else.
30. All-Free-Download
All-Free-Download offers easy search and direct downloads of PSD, PNG and vectors.
31.Ego Icons
Ego Icons offers over 1500 premium icons and 100 free vector icons. Visit also the subsites by clicking on the buttons on the top navigation bar.
32. Alien Valley
AlienValley offers a wide range of high quality icons in exchange for your email address.
33. Dreamtale
Dreamstale will provide you with great free premium icons with attribution.
34. DuckFiles
35. 1001 Free Downloads
1001 Free Downloads specializes in flat icons that come with a variety of beautiful and whimsical options.
36. Graphics Bay
37.Pixeden
On Pixeden, you can search for icons in several sizes. There is a wide selection from 16x16 to 512x512 in PNG format.
38. NounProject
NounProject is a convenient search, easy download and high quality icons. A link to the author is required. Membership with a monthly fee removes download restrictions.
39. Iconmonstr
Iconmonstr offers icons in several sizes without attribution.
40 Fusion plate
