Prepare Beautiful Flat Icons For Use w/ CircuitPython

Last updated August 25, 2024

Save

Beautiful Flat Icons
Link to Beautiful Flat Icons
License
Included Formats
Scaling The Icons With Inkscape
Convert to Indexed Color Mode

Getting Started

Adafruit Playground is a wonderful and safe place to share your interests with Adafruit's vibrant community of makers and doers. Have a cool project you are working on? Have a bit of code that you think others will find useful? Want to show off your electronics workbench? You have come to the right place.

The goal of Adafruit Playground is to make it as simple as possible to share your work. On the Adafruit Playground users can create Notes. A note is a single-page space where you can document your topic using Adafruit's easy-to-use editor. Notes are like Guides on the Adafruit Learning System but guides are high-fidelity content curated and maintained by Adafuit. Notes are whatever you want them to be. Have fun and be kind.

Click here to learn more about Adafruit Playground and how to get started.

Beautiful Flat Icons

This is a set of free and open sourced icon graphics published by Nick Roach to the website elegantthemes.com.

Link to Beautiful Flat Icons

On the page click the "Download The Package" link. Or use the button below which I've linked to the same URL.

Download Beautiful Flat Icons

License

The icons are licensed under the GPL-2.0 License which permits their usage in personal and commercial projects.

Included Formats

Within the download there two different styles of the icons in all of the following formats:

Adobe Illustrator .ai
Encapsulated PostScript .eps
PDF .pdf
Portable Network Graphics .png

For use with CircuitPython we use PNG, BMP, or GIF images. So we could use the included PNG images however we may want to do some further manipulation depending on your use case. There are two included PNG files are 64px by 64px and 128px by 128px. Those are fairly large by the standards of most typical display sizes used by CircuitPython devices.

The PNG files in the download are RGB color mode. We do have support for that in CircuitPython, but transparency isn't supported with them at this time.

For the above reasons I wanted to scale the images down and convert them to indexed color mode.

Scaling The Icons With Inkscape

I opted to use the Adobe Illustrator .ai files to scale the icons. Since these are vector graphics it means we should be able to scale them without much loss of detail. Open the .ai file of your choice in Inkscape. Zoom way out so that you can use the selector tool to draw a box around all of the icons. They're all in a big horizontal row so you'll need to zoom out quite far and make a very wide box to encompass all of them.

Once all of the icons are selected use the resize controls on the top bar to set the height to your desired size. Ensure that the locked icon is enabled so that changes to the height or width will affect the other too. Since we have 1 big row we can simply update the height to the new desired size and rely on the locked aspect ratio to change the width for us.

I elected to scale the icons down to 32px by 32px. So I'm going to set the height to 32px.

I set the height to 32px and then pressed enter.

If you zoom back in it will look like the icons are all messed up now becaues the background "pages" that they sit on don't get resized along with them. Don't Worry! We're going to export it in a way that will still split up the icons into individual png files.

Next press File -> Export.

That will open up export panel on the right side of the screen.

Click on the 'Batch Export' tab.

Then click on 'Layers'

I like to create a directory named after the page and icon size like "page_1_32px/" or similar. The file select box just above the export button will select where the generated files are going to be saved to. Click the browse icon and select the directory created, or wherever you'd like to save the exported PNG files.

Click the 'Save' button.

Leave the default values in the export dialog, click the 'OK' button.

It will export all of the png image files into the selected location.

Convert to Indexed Color Mode

These images are exported in the RGB color mode, CircuitPython supports it, but not with transparency at this time. So I wanted to convert them into indexed color mode PNGs. We can use python PIL to do this.

Install PIL with:

Copy Code

pip install pillow

pip install pillow

Now we can use a simple python script to loop over all files in a directory for any images that are found load them with PIL and convert them to the indexed color mode and then save a converted copy.

Make a directory to output the converted images into

Copy Code

mkdir converted

mkdir converted

convert_to_indexed.py

Download File

Copy Code

import os
from PIL import Image

for file in os.listdir("./"):
    if file.endswith(".png"):
        print(file)
        img = Image.open(file)
        converted = img.convert(mode="P",  palette=Image.ADAPTIVE)
        converted.save(f"converted/{file}")

import os
from PIL import Image

for file in os.listdir("./"):
    if file.endswith(".png"):
        print(file)
        img = Image.open(file)
        converted = img.convert(mode="P",  palette=Image.ADAPTIVE)
        converted.save(f"converted/{file}")

create a copy of this python script in the directory with all of the RGB versions of the PNGs that were exported from Inkscape.

Run it with the command:

Copy Code

python convert_to_indexed.py

python convert_to_indexed.py

The converted, now indexed color mode, PNG image files will be saved into the converted/ directory.

These resized and converted images are now ready to be used with adafruit_imageload and palette.make_transparent(0).

This page (Prepare Beautiful Flat Icons For Use w/ CircuitPython) was last updated on August 25, 2024.