Well I don't know if that Fontastic service has any restrictions, or offers hints how a generated and uploaded SVG has to be defined in order to be parsed. Since I'm not going to make a never used account there for try outs, I've just downloaded a SVG sample from their...
Sure, there’s nothing wrong with using libraries, but it also doesn’t hurt to understand how the tools you use really work under the hood. So why not also learn how to draw your own SVG icons by hand, even if you end up using a library in the end?
Step 1: Drag & drop selected SVG’s and create a new setStep 2: Select all the icons you wish to include in the fontStep 3: Generate the fontStep 4: Rename all the icons and define a unicode character for each (optional)Step 5: Download the generated filesCongrats...
Most icons translate well to the SVG format, given their simple appearance and clearly defined shapes and borders. Plus,website iconsmust be responsive for different screen sizes, so they must be scalable without losing quality. For this reason, I recommend usin...
Making more complex icons You’ve now made your first scalable SVG font glyph. By using options from theFill and Strokepane, editing path nodes and combining objects and strokes you will be able to make much more ambitious icon designs. I don’t want to go into a full Inkscape tutorial ...
Whether you're an Android or iOS user, there's no doubt mobile design is the next big thing, and so are 3D icons. As a product designer, you want to make sure your app stands out so that users find it quickly on the home screen. Create a beautiful experience for them from the ver...
Having a prepared file is not enough to make great icons. There are lots of various tips and techniques to help you create sharp icons. Today I’ll go through a few most important ones. These tricks will bring you closer to becoming the master of pixel perfect icons. Without further ado...
So if we wanted to move an object down from one medium thickness line to the next, we’d increase its location on the y axis by one 100px.If that still sounds a little unclear, don’t worry this will all make sense as we get into the practicalities of creating our SVG icons....
You can then use the CSS background-position property to display the proper icon:.icon { display: inline-block; height: 96px; width: 96px; background-image: url('../icons.svg'); background-repeat: no-repeat; } .icon-tags { background-position: -96px 0px; }You...
Solid basics of an SVG icon system in this guide from Florens Verschelde, mixed with some good tricks: the two-color trick, pre-loading the sprite, and using