Awesome

Circum Icons

npm npm npm

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

Circum_Free-1

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. <br> 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 <br> if you want to see the properties section. 😉😎🤓

new-properties

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! 👀

Authors

@klarr-agency