Central Icon System in Framer

Copy component

Copy component

Central Icon System in Framer

Copy component

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.

image of Nandi Muzsik
picture of Martin
picture of Andreas

Created by

Central Icon System in Framer
Central Icon System in Framer
Central Icon System in Framer

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:

  1. The component is easily resizable, and the icons scale along with it. This means we don't need variants for different icon sizes.

  2. 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:

  1. The component is easily resizable, and the icons scale along with it. This means we don't need variants for different icon sizes.

  2. 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:

  1. The component is easily resizable, and the icons scale along with it. This means we don't need variants for different icon sizes.

  2. 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).

Central Icon component in Framer

Switching icons in the Central Icon component.

Central Icon component in Framer

Switching icons in the Central Icon component.

Central Icon component in Framer

Switching icons in the Central Icon component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

    SVG Component for Framer

    SVG Component for Framer

    Component

    SVG Component for Framer

    SVG Component for Framer

    Component

    SVG Component for Framer

    SVG Component for Framer

    Component

    Copy Component Button (Copy to Clipboard)

    Copy Component Button (Copy to Clipboard)

    Component

    Copy Component Button (Copy to Clipboard)

    Copy Component Button (Copy to Clipboard)

    Component

    Copy Component Button (Copy to Clipboard)

    Copy Component Button (Copy to Clipboard)

    Component