Atomize Icons

atomize_icons is only available for react right now.We'll be bringing atomize_icons to vanilla js and other frameworks soon

Icons in your React projects easily with atomize_icons, From the most popular open source figma design system Atomize Design System

Installation (for standard react modern project)

yarn add atomize_icons

# or

npm i atomize_icons

example usage

import { About } from "atomize_icons";

function App() {
  return (
    <h1>
      What are you talking <About /> ?
    </h1>
  );
}

CSS SUPPORT

All css properties are supported by default except properties that may lead to increase in Icon size like font-size etc but you can use scale to resize the icons The reason why we chose not to include sizing is to keep the styles uniform across the whole design system

we are planning to implement the atomize design system for react next

ie using the react style prop

import { About } from "atomize_icons";

function App() {
  return (
    <h1>
      <About style={{ color: "red" }} />
    </h1>
  );
}

Using Vanilla css/sass/scss

src/index.css
.style: {
color:red;
}

import { About } from "atomize_icons";
function App() {
  return (
   <About className='style'/>
  );
}

Using Tailwind CSS

To use tailwind-css you must configure tailwindcss with react here

import { About } from "atomize_icons";
function App() {
  return <About className="text-yellow-400" />;
}