From time to time I need a png-file of a icon. I really like lucide icons icons, but they only offer svg files. This is great for web dev, but not so much for working with Unity or other systems that don’t support svg out of the box.

I have a small workflow that I use to download and convert these icons that I wanted to share with you.

I’m doing this using Windows Subsystem for Linux running Ubuntu WSL because I prefer the linux command line experience, but this also works on Windows in PowerShell or CMD. The commands might be slightly different, though. Keep that in mind.

First, create a new directory to work with using mkdir lucide-convert and then I enter that directory using cd lucide-convert.

Then I download the lucide icon svgs. I’m using npm with the following command npm install --save lucide-static. This command will save the static version of lucide into the lucide-convert/node_modules/lucide-static directory. In that directory is another directory named icons. This contains all the svg files. Use cd node_modules/lucide-static/icons to change into that directory.

For converting to png I’m using a program called ImageMagick, specifically the mogrify command it provides.

The full command is mogrify -format png -background none -density 300 -resize 48x48 *.svg

Here’s an explanation:

  • -format png tells mogrify that we want png output files
  • -background none specifies that we want a transparent background
  • -density 300 sets the pixels per unit to 300 to make the output file less blurry
  • -resize 48x48 tells mogrify to resize the output image to 48x48px
  • *.svg is the ‘input file’. Since the wildcard * matches all files with .svg file type this will run on all files in that directory. If you do not want that you need to specify the exact file you want to convert

This command will take a while to finish. After it’s done you should have a .png-file for every .svg file in the directory!

Thanks for reading 🌐