If you’ve been copying and pasting SVG code into the GenerateBlocks icon picker every time you need a custom icon, there’s a built-in way to save those icons directly to the library so they’re always available.
The GenerateBlocks Asset Library
Go to GenerateBlocks > Asset Library. Inside, you’ll find a section for icons that makes it possible to store custom SVGs and access them from the icon picker on any page.
Creating a Custom Icon Group
Inside the Asset Library, add a new group and give it a name — something like “My Custom Icons” works fine. This group will appear as its own category inside the icon picker across your entire site.
Adding Icons to the Group
With the group created, add your first icon and paste in the SVG code. Name it clearly so it’s easy to identify later.
One important note: for icons to be color-changeable inside GenerateBlocks, the SVG code needs to use currentColor for stroke and fill values. Icons with multiple elements may have a mix — for example, background shapes with a stroke of currentColor and fill: none, while a foreground element uses fill: currentColor. As long as those values are in place, you’ll be able to change the icon color from within the block settings.
Save the icon, then repeat the process for each additional icon in the group.
Using the Icons
Once saved, open any page and add an icon block. Open the icon library and navigate to your custom group. The icons appear there alongside the default GenerateBlocks set. Select one to insert it, and all the standard settings apply — color, size, and any other options you’d normally use with a built-in icon.
Why This Matters
Setting icons up once in the Asset Library eliminates the need to return to Figma or an external icon source every time you need to reuse them. For project builds that rely on a consistent set of custom icons throughout, this keeps the workflow clean and significantly faster.
