

Here is a quick tutorial (my first) that will show you. If you want differently coloured or multi-coloured icons then leave the fill. So you finally finished your amazing icon set, and want to upload it as SVG files on Iconfinder. Of course you could remove the fill colour in Illustrator but then you wouldn’t be able to see the graphic and that’s just annoying. The default fill in SVG is black, so the optimizer will leave the fill off. The simplest way to remove fill colours when exporting from Illustrator is to set all their colours to black-absolute black, #000000. Since we’re interested in colouring the icons in our CSS and want to have different hover colours we need to remove the fill colours in Illustrator. The final change we need to make is the fill. Move the dinosaur icons so that they are on individual artboards. Our first step is to create multiple artboards- each artboard should be 256px × 256px Open up the Illustrator file and you should see this: Select the following options in the SVG Options dialog:Īfter that, double check that the code conventions and SVG global attributes are correct.The first step to using SVG icons is to organize the Illustrator document so it can be exported properly.įor icons, the way we export is no different from standard SVGs: resize & name the artboards. Verify that you follow the Icon Design Guidelines.īefore you export the file as an SVG make sure to check that you followed the guidelines and remove all unecessary layers (especially "Padding" and "Grid").Įxport the file with the export menu under: Export > Export As. You can now remove the content from the example logo layer ("Draw") and start creating. The Illustrator template is created following guidelines from the Icon Design Guide.ĭownload and open the Illustrator template. Please check the Icon Design Guide before you start working with the template to ensure integrity with the Lucide icon pack. This Guide explains how to properly use the Adobe Illustrator Template for Lucide.Īttention: Even though it is unlikely the template can be outdated or not 100% correct. People promoting a weather-focused website can also make good use of Adobe Illustrator icon.
