Circum Icons

This library was created following Google material and IBM Carbon design principles. Our main goal was to keep a certain consistency throughtout all the set and ensure that each icon has the same visual weight.

Available for these frameworks 👉 React, Vue and Svelte

Documentation

Français Español

Installation

Install with npm

React

  npm i -D @klarr-agency/circum-icons-react

Vue.js

  npm i -D @klarr-agency/circum-icons-vue

Svelte

  npm i -D @klarr-agency/circum-icons-svelte

Usage/Examples

// Add one of these 3 lines below corresponding to your framework
import CircumIcon from "@klarr-agency/circum-icons-react"; // React
import CircumIcon from "@klarr-agency/circum-icons-vue"; // Vue
import CircumIcon from "@klarr-agency/circum-icons-svelte"; // Svelte



<CircumIcon name="calendar"/>
// You can change color and size
<CircumIcon name="calendar" color="#000" size="48px">

Features

Array Builder

You can created an array directly on our website. Don't need to go back and forth to copy each icon name.
In this example, you can see how to build a side navigation 🏗👇 You can find this example here Circum-Icons-SvelteKit-Demo

Create Properties

Now you can save more time by adding new properties in your array. Remember you need to be in object mode
if you want to see the properties section. 😉😎🤓

Icons

You can see the list of available icons on circumicons.com

Roadmap

• Property manager (Possibility to add new properties in the Array Builder) 🏗
• Add keywords to search terms 🔎
• Download icons in color of choice 🎨
• Resize icons on the fly 🚀
• Clipboard options in single selection type (Component tag vs SVG).📌
• Animate version 🎬
• Duo tone & solid style for all 285 icons 😻
• Premium access // Array Builder for 809 icons, Component Builder and more. 💸
• Add icons to Elementor for WordPress 📰

Where to find us! 👀

• Reddit
• Penpot Libraries
• Toools Design
• Devresourc.es
• Gumroad

Authors

• @klarr-agency