Central Icon System in Framer

Central Icon System in Framer

Central Icon System in Framer

Central Icon System in Framer

Component

Component

Component

Component

Central Icon System in Framer

Central Icon System in Framer

Central Icon System in Framer

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.

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.

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.

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.

picture of Martin

Martin David

picture of Martin

Martin David

picture of Martin

Martin David

picture of Martin

Martin David

picture of Andreas

Andreas Storm

picture of Andreas

Andreas Storm

picture of Andreas

Andreas Storm

picture of Andreas

Andreas Storm

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

Copy component

Copy component

Copy component

Copy component

Features

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

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
Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

Copy the component.

Step 3 outline

Step / 03

Paste in your website.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.