Picons Blog

Using the right icon set in Figma can define the visual consistency of an entire product. Picons are available as SVG files and Sketch files — both of which import cleanly into Figma — giving you access to 1,726 thin-line icons or 660 solid icons the moment you sit down to design.

This guide covers every method: drag-and-drop SVG import, bulk organisation into components, importing the Sketch file, and setting up a shared team library so your icons stay consistent across every project file.

The quick answer

To use Picons in Figma: download your Picons set, locate the SVG folder, and drag the SVG files directly onto your Figma canvas. Figma converts them to editable vector layers. Turn each icon into a named component (Cmd/Ctrl + Alt + K) and publish them to your team library for reuse across files.

---

Method 1: Import SVGs by drag and drop (fastest)

This is the quickest way to get a single icon or a small selection onto your canvas.

Step 1 — Download your Picons set
After purchasing, download the ZIP from your email confirmation link. Extract it and open the SVG folder. Icons are organised into category subfolders (e.g. 01 Essentials, 02 Files & Documents).

Step 2 — Open Figma and select your canvas
Open the Figma file you are working in. Select the frame or page where you want the icons to live.

Step 3 — Drag the SVG files onto the canvas
Select one or more .svg files in Finder (Mac) or File Explorer (Windows) and drag them directly onto the Figma canvas. Figma imports each file as a vector group and preserves all paths.

Step 4 — Ungroup and check the vector
Select the imported group and press Cmd/Ctrl + Shift + G to ungroup. You now have the raw vector paths. Check the Layers panel to confirm the structure looks correct.

Step 5 — Resize and recolour
Hold Shift while dragging a corner handle to resize proportionally. To recolour, select all paths and change the fill in the right-hand panel. Picons Thin icons use a single fill colour by default, so a single click selects the whole icon.

---

Method 2: Import the Sketch file (best for full libraries)

Every Picons set ships with a .sketch file. Figma can import Sketch files directly — and when it does, Sketch symbols are automatically converted to Figma components. This is the fastest way to get an entire icon library into Figma as ready-to-use components.

Step 1 — Locate the Sketch file
In your downloaded Picons ZIP, find the file ending in .sketch (e.g. picons-thin.sketch).

Step 2 — Import into Figma
In Figma, go to File menu → Import (or press Cmd/Ctrl + Shift + K). Select the .sketch file. Figma processes the import — for a 1,726-icon set this typically takes 10–30 seconds.

Step 3 — Check the imported pages
Figma creates a new file with the Sketch contents. Symbols from the Sketch file appear as a page named Symbols — these are your Figma main components.

Step 4 — Publish to your team library
Open the Assets panel (Shift + I), click the book icon (Libraries), and publish the file as a library. Your teammates can now access the full icon set from the Assets panel in any project file.

Tip: Before importing, expand all strokes in Sketch (Layer → Convert to Outlines) to prevent any stroke-handling differences during the import.

---

Method 3: Paste SVG code directly (best for single icons)

If you need a single specific icon without opening a folder:

1. Open the SVG file in a text editor (or right-click → Open With → TextEdit/Notepad)
2. Select all and copy (Cmd/Ctrl + A, Cmd/Ctrl + C)
3. In Figma, press Cmd/Ctrl + V

Figma pastes the SVG as a vector layer, identical to a drag-and-drop import. This method is useful when you are referencing an icon by filename and want to grab it without leaving Figma.

---

Setting up your Picons icon library in Figma

Getting icons onto the canvas is one thing. Setting up a proper library means you can swap icons in one click across every frame in your project.

Name your components consistently

Good naming creates useful hierarchies in the Assets panel. When you create a component from an icon, prefix the name with the category:

Icons/Essentials/compose
Icons/Essentials/pencil
Icons/Files/archive
Icons/Files/document

The / separator creates nested groups in the Assets panel — exactly like the category folders in the SVG download.

Use the Picons filename as your component name

Every Picons SVG filename includes keyword tags (e.g. thin-0001_compose_write_pencil_new.svg). Use the first tag as the component name and the others as a description in the component properties. This makes icons searchable by their use-case in the Assets panel.

Create icon size variants

Picons SVGs are drawn on a 24×24px grid. If your design system uses multiple sizes (16px, 24px, 32px, 48px), use Figma’s Variants feature to create a single component with a Size property:

1. Select all size variants of one icon
2. Cmd/Ctrl + Alt + K to create the first component
3. Duplicate and resize for each variant
4. Select all variants → Combine as variants in the right panel
5. Name the Size property 16, 24, 32, 48

---

Use cases: how designers use Picons in Figma

UI/UX product design

Use Picons Thin for clean, modern app interfaces. Import the full Sketch library, publish it to your team library, and every designer on the team can drag icons from the Assets panel into any frame without hunting through folders. When you update to a newer Picons release, update the library file and Figma propagates the changes everywhere it is used.

Prototyping and wireframing

For early-stage wireframes, drop individual SVGs onto the canvas without converting to components. The simple monochrome style of Picons Thin communicates intent without distracting from the wireframe’s structure.

Design systems

If you are building a company design system, Picons is one of the few icon sets that covers 1,726 icons in a consistent thin-line style and ships a Sketch source file you can import as Figma components from day one. Pair it with Picons BasiColor (273 colour icons) for feature icons and spot illustrations within the same visual language.

Presentation decks

Figma is increasingly used for presentations. Picons icons work well at any size from 16px navigation icons to 120px section headers — the SVG format means no pixelation at any scale.

---

Frequently asked questions

Can I use Picons directly from a Figma Community file?
Not yet — Picons does not currently have an official Figma Community file. The fastest route is importing the included Sketch file, which Figma converts to components automatically.

Does importing the Sketch file preserve icon colours?
Yes. Picons SVGs use simple flat fills. These import correctly as Figma fill properties and can be changed in the right-hand panel after import.

Can I recolour Picons icons in Figma?
Yes. Picons Thin and Basic icons use a single fill colour. Select the icon and change the fill in the Design panel — the colour updates across all paths instantly. For Picons BasiColor, each colour element is a separate layer, giving you full control.

Can multiple team members use the same icon library?
Yes. Import the Sketch file once, publish it as a Figma library, and every member of your Figma team (on Starter, Professional or Organisation plans) can access the icons from the Assets panel.

Which Picons set works best for Figma?
For most UI projects: Picons Thin — 1,726 clean outline icons covering every product design category. For a solid, versatile alternative: Picons Basic — 660 solid-style icons across three collections that work equally well in Figma. Both include the Sketch file for Figma import.

Can I modify the icon paths after importing?
Yes. All Picons import as editable vector paths in Figma. Use the Edit object tool (Enter to enter vector edit mode) to adjust individual nodes. This is permitted under the Picons licence for personal modifications.

---

Summary

Method	Best for	Time
Drag-and-drop SVG	Quick single icons	30 seconds
Import Sketch file	Full icon library as components	2–5 minutes
Paste SVG code	Single icons without leaving Figma	1 minute
Set up team library	Shared components across team	5–10 minutes

Picons ships with every format a Figma workflow needs — SVG for individual imports, Sketch for bulk library setup, and PNG at 11 sizes when you need raster exports. Download Picons and have a fully organised Figma icon library ready in under five minutes.

The friendly people at Sephora reached out to craft some custom icons. Sephora is the leader in personal care and beauty products retail, with 2,700 physical stores in 35 countries worldwide.

We started with tap bar navigation icons for the mobile app…

and experimented with mobile app icons and other graphics.

The collaboration has been very successful and over the last 2 years, we created a comprehensive icon system for their online presence.

With more than 200 icons (and counting), the new icon system quickly became a valuable corporate asset.

We took a super sleek and simple solution for the icon system – outlined icons, consistent line weight and curved edges. The icons reflect a friendly visual voice, just like Sephora, and the Picons Thin icon collection.

You can find the icons across the Sephora website.