GitHub
  1. Icon Monks
  2. Guides
  3. Icons in Figma

How to use Icon Monks icons in Figma

The fastest way to get an Icon Monks icon into Figma is to copy its SVG from the icon browser and paste it onto the canvas. It arrives as one editable vector path in the weight, size and color you picked.

Steps

  1. Find the icon. Open the icon browser at iconmonks.co and search by name or tag, or browse a category.
  2. Pick a weight, size and color. Choose thin, light, regular, bold, fill or duotone, then set the size and color in the toolbar.
  3. Copy the SVG. Select the icon and press Copy SVG in the detail panel.
  4. Paste into Figma. Click the Figma canvas and paste. The icon becomes a vector layer you can resize, recolor and turn into a component.

Download instead of copying

Prefer files? In the detail panel download the icon as SVG or PDF and drag it onto the canvas. SVG and PDF stay sharp at any size; PNG and WebP exports go up to 1024 px for slides and documents. Each icon page, like the house icon, also links the SVG for every weight.

Sketch, Illustrator and Framer

The same SVG works everywhere: paste it into Sketch or Framer, or open the SVG or PDF file in Illustrator. Because every icon is one flat path with no strokes, it does not need outlining or flattening, and it looks exactly like the coded version your developers ship.

Keep design and code in sync

Use the same icon name in design and code. The house icon you paste in Figma is <House /> in React, IconMonks.house in Flutter and .house in SwiftUI, so handoff needs no lookup table. See Get started for each platform.

Frequently asked questions

Is there a Figma plugin for Icon Monks?

Not yet. Copy SVG from the icon browser and paste it into Figma; it takes a few seconds and keeps the vector editable.

Can I change the color after pasting into Figma?

Yes. The icon is a single filled path, so change its fill like any other vector layer.

Do I need to credit Icon Monks in my designs?

No. The MIT license lets you use the icons in client and commercial work with no credit needed in your interface.

More guides

Written by Atiqur Rahaman, Founder & CEO, Design Monks & Dev Monks at Design Monks. About Icon Monks

Last updated with version 0.4.3. Release notes