The icon pack is housed within a simple component in Framer, each icon having its own variant.
Working with SVG layers in Framer can be kinda limited, and sometimes they behave in weird ways. So, I created an SVG component, inspired by Joshua Guo, where I can paste the SVG code for each icon directly to display them in each variant.
This approach has some advantages:
The component is easily resizable, and the icons scale along with it. This means we don't need variants for different icon sizes.
As the SVG component has its own color property, we can link a variable to it. This allows us to control the color of the icon directly from the design canvas without needing to create color-specific variants (like black, white, and so on).
Step / 01
Remix the project.
Step / 02
Copy the component.
Step / 03
Paste in your website.