The inlined SVG icons are currently the best way to use icons on the web. They work on every browser, are fully controllable by CSS, they’re faster as there’s no additional request to the server, so no flash of invisible icons either. If you’re not familiar with that approach or still need convincing, check out this great article on CSS Tricks. But how should we prepare and use the inline SVG icons?
Design
I prefer to design in Sketch, but any vector design tool will be good if you just can zoom in and display the pixel grid.
I start by creating an artboard. 24x24px is usually my default grid size, but if you prefer a bit smaller icons 20x20 is also fine. For your icons to look crisp and pixel-perfect, make sure to:
- display them at least at the grid size
- position the item on full pixels only (integers)
- use integers for the border width too
Sketch’s Arrange -> Round to Pixel option can be helpful with fixing the alignment. Otherwise, the icon will look blurry - compare the left, pixel-perfect side of the icon with the right:
To maintain a consistent look across your icons use the same line weights, line ends and joins, border radiuses. If you’re going for multicolor (which was not so easy to achieve with font-icons) make sure that you’re not picking a random color every time you want to add a tint, work with a prepared palette.
When you have finished your new shiny icon, it’s time to clean it up a bit. Convert strokes to outlines. If you rotated your icon, flatten it before exporting. This will remove any of the unnecessary transforms in exported svg. Export the whole 24x24px artboard, not just the icon - which could be smaller and not square but rectangular.
Export
We want to make the final file as small as possible. We already did what we could in Sketch, now it’s time to reach for a nifty compressing tool. SVGOMG is a web-based SVGO implementation that is easy and fast to use, so that would be my choice.
How to use it? Drag and drop your icon, check all Features except Remove xmlns and Remove viewBox. Adjust Precision so there’s no visible change when you switch the level. 2 or 3 is usually the sweet spot (in case of the Octocat below, it’s 2):
SVGO does a really good job, but we can improve it more. In case of a simple, one color icon this is what we got:
We can remove unnecessary groups, defs, styles. Remove fills as these will be added in CSS for easier control of color (you want to keep them in case of a multicolor icon). Inside path tag you can probably remove the fill-rule. What you want to achieve is a path with just a d attribute inside, like: <path d="M3,3 L3,1..
As the last thing we can remove the xmlns, so only the viewBox remains. This will break the preview of your icons, but don’t worry! We don’t need xmlns as we are going to be inlining our icons. It’s only required if we wanted to load the images separately, eg. as a background. Here’s a small comparison, first we have the original Sketch file:
And the result after compressing:
React
Finally, let’s create a React component inside src/components/icons/ and name it IconAdd.js. Replace the
We will enable passing a className to the icon. Applying CSS to the icon is crucial as it does not have any defined size, and will not work without a set height/width. We can also change the color of the icon in CSS, by using the fill property.
Then import your icon inside the component where you want to use it:
That’s it! Happy designing and/or implementing! :)
Need help with your React project? Or maybe UX/UI? Feel free to contact us!
