Using SVG crypto icons in Figma

If you design wallets, exchanges or dApps in Figma, you end up placing the same token and chain logos dozens of times. Dropping in a fresh file every time leads to slightly different sizes, broken colors and layers named Vector 37.

The fix is to import each logo once, keep it as a real vector, wrap it in a component with variants for its styles, and use instances everywhere else. Here is how to do that without losing quality along the way.

Getting an SVG onto the canvas

Figma accepts SVG in two convenient ways.

Drag and drop a file. Drag a .svg file from your file manager onto the canvas. Figma creates a frame named after the file, sized to the file's width and height, with the shapes inside as vector layers.

Paste SVG code. Copy the SVG markup as text (on Web3 Icons, use Copy SVG on any icon) and paste it into Figma with Cmd+V or Ctrl+V. Figma parses the markup and creates the same frame of vectors. This is the fastest route when you are pulling many logos one after another. If you ever get a text layer instead of shapes, save the code as a .svg file and drag that in.

Because the frame takes its size from the file, pick the export size you plan to design at before you copy. For a 24 px list icon, export at 24; for a token detail header, 48 or 64.

What survives the import

Icon files made of paths with solid fills, which covers most crypto logos, come through intact. Linear and radial gradients usually import correctly. Clip paths become masks or clipped groups, which look the same but appear differently in the layers panel.

More unusual SVG features, such as filters, some mask setups or styles defined in a <style> block, may be approximated or dropped. After importing a logo with gradients or masks, put it next to the original in a browser at a large zoom and compare. If something is off, the gradients, masks and clip paths guide explains what those parts of the file do.

Keeping it a vector

Once a logo is in Figma, a few habits keep it sharp and editable.

• Scale with the Scale tool (K), not by dragging the frame. Dragging a frame's edge resizes the frame, but child layers with default Left and Top constraints stay the same size. With the Scale tool, everything scales together.
• Or set child constraints to Scale. Select the vector layers inside the frame and set both constraints to Scale. Then resizing the frame or a component instance resizes the logo with it.
• Flatten only when you mean it. Flatten (Cmd+E or Ctrl+E) merges the vectors into one shape. That is handy for a mono icon, because one shape means one fill to change. For a branded logo with several colors, flattening merges everything into a single fill and destroys the artwork.
• Never rasterize a logo you will reuse. A rasterized layer is a bitmap and blurs when scaled, which defeats the point of SVG.

Keep the frame square and keep its padding. Icon sets are drawn inside a fixed box, usually 24 by 24, with the mark sized to sit optically even with its neighbors. Cropping the frame to the shape's bounds throws that balance away. The 24 px icon grid guide explains why the box matters.

Building a component with variants

A component set per logo lets you switch styles in place instead of swapping files.

1. Import the branded, mono and background versions of one logo at the same size.
2. Rename each frame to something predictable, for example Style=Branded, Style=Mono and Style=Background. Figma reads the Property=Value format when you combine components.
3. Select each frame and create a component with Cmd+Option+K on a Mac or Ctrl+Alt+K on Windows.
4. Select all three components and click Combine as variants in the right panel.
5. Name the component set after the asset, for example Token/ETH or Network/Base. Slashes group components in the assets panel, so Token/, Network/, Wallet/ and Exchange/ become folders.

Now an instance of Token/ETH has a Style dropdown. Designers can switch a whole screen from branded to mono icons by selecting the instances and changing one property.

For list rows, cards and token selectors, add an instance swap property to the parent component (for example, a Token row component) and point it at your icon components. Then swapping ETH for SOL in a mock-up is one click, and the size and position stay put.

Should size be a variant too? Usually not. One vector scales cleanly from 16 to 256. Add a size variant only if you have hand-tuned versions for small sizes, which some icon sets do for 16 px.

Recoloring mono icons

The mono style exists so you can change its color. In Figma, there are three ways to do it, from quickest to most maintainable.

Selection colors. Select an instance and look at Selection colors in the right panel. A mono icon shows one color there. Change it, and every layer using it updates.

One flattened shape. If the mono icon has several layers, flatten them in the main component so there is a single fill. Overrides on instances then stay simple and survive updates to the main component.

A color variable. Bind the mono icon's fill to a color variable, such as icon/primary, in the main component. If your file uses variable modes for light and dark themes, the icon follows the theme automatically, and nobody has to remember to recolor it.

Don't recolor branded logos to match your palette. Brand guidelines usually require the official colors, and a blue Bitcoin mark looks like a mistake to anyone who knows the logo. The mono versions guide covers how a single-color version is derived from a colorful logo in the first place.

Exporting from Figma

When a developer or another tool needs the file, export from the component's frame, not from the vector inside it. Exporting the frame keeps the square box and its padding; exporting the vector crops to the shape.

In the Export section of the right panel, choose SVG. The SVG export settings include options such as whether to include id attributes; exact options can change between Figma versions, so look at the settings menu next to the format. For production icons, leaving IDs out gives cleaner files, though gradients and clip paths still need their own IDs to work.

For PNG, add export rows at 1x, 2x and 3x so you get every density at once. The SVG to PNG guide covers which sizes to choose.

Open an exported SVG in a text editor before handing it off. You may find a clip path for the frame, extra wrapper groups or a white background rectangle that wasn't in the original. Remove what isn't needed, then check the result in a browser.

A quick checklist

• Import at the size you will design at, by pasting the code or dragging the file in.
• Compare logos with gradients or masks against the original.
• Keep the square frame and its padding.
• Use Scale constraints or the Scale tool, never raster layers.
• One component set per logo, with a Style variant property.
• Mono fills bound to a color variable.
• Export from the frame and read the SVG before shipping it.