How to quickly color fill a PNG or SVG Icon using the Pen tool

How to quickly color fill a PNG or SVG Icon using the Pen tool

Many icon sites give away free icons in black or white stroke but require you to sign up for a membership to design in color. We can bypass this relatively easy using Figma’s Pen tool.
  1. Outline the area you want to fill.
  1. Add the fill property and choose the color you want.
  1. Move the vector behind the icon.
  1. Repeat step 1-3 for all areas you want to fill.
  1. Select every item and frame selection.
  1. Export this frame as a PNG or SVG.
 
Video showing how to color fill an icon using Figma’s Pen tool.
 
After exporting the image, I uploaded it to Backblaze and linked it to my Notion page as an icon.
The color filled icon in place as a Notion icon
The color filled icon in place as a Notion icon