We didn’t leave any space around the icon, so there’s a risk that it will be rendered with squarish sides. Browsers use anti-aliasing when rendering SVG shapes, but sometimes the extra pixels from the anti-aliasing are rendered outside of the viewBox and they’re cut off. Leave a little bit of space near the edges, especially for round shapes. When I’m not sure, I like setting stuff on a 20×20 artboard. For example if all your icons can fit on a 15 by 15 pixel grid, and are mostly used with those exact dimensions, go ahead and work with 15×15 artboards or documents. Your icon doesn’t have to be square, but square icons are easier to work with (unless your icon or graphic is really wide or really tall).Įxact dimensions only matter if you want to micromanage pixel fitting (to get the sharpest possible results on low dpi screens). It’s a great way to make sure your icon is clean and doesn’t have a ton of hidden paths lying around. Simple icon on an artboard in Illustrator (left) and Sketch (right) Work with a new document or artboardĬreate a new document or new artboard in your favorite tool, and copy-paste your icon in the center.

Yet I find that reworking it a little bit in your favorite tool to make sure it’s just right can save you some headaches and improve the result. When you get a SVG icon from a designer or from a design tool (Illustrator, Sketch, Figma, etc.), it’s tempting to just throw it into your project. Many thanks to the translators! Preparing your icons This article is available in French and in Chinese. Two-color icons and gradient fills are possible too, but require a bit more work. Icons which are often simple, single-color icons (each potentially used in several different colors depending on context and user interactions).Content and communication websites, often based on big CMSes, rather than full-JS web apps.It works well for our needs, which include:

This is how we do it in our small front-end team at Kaliop. ←Colors Optimization → Get more updates.ĭo you want to get notified when a new component is added to Flowbite? Sign up for our newsletter and you'll be among the first to find out about new features, components, versions, and tools.There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all.

Alternatively, you can check out a list of the top 10 open source SVG icon libraries.

Icon user svg