Component
Central Icon System in Framer
This is the free version of Iconists' Central Icon System, now on Framer as a small, easy-to-use component. It includes 49 icons, but the complete icon set (available as a Figma file) comes with over 922+ symbols.
Feel free to copy this component and paste it into your website to start using these beautiful icons.
Created by
About the resource
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.
About the resource
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.
About the resource
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.
SVG component properties in Framer
SVG component properties in Framer
SVG component properties in Framer
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).
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).
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).
Switching icons in the Central Icon component.
Switching icons in the Central Icon component.
Switching icons in the Central Icon component.
