cl Icons

A lightweight, customizable icon library for use in cl's web applications and React projects.

Installation

npm install cl-icons-library
# or
yarn add cl-icons-library

Usage

Basic Usage

import { DeleteIcon } from "cl-icons-library";

function MyComponent() {
  return (
    <button>
      <DeleteIcon size={16} color="#333333" />
      Remove Item
    </button>
  );
}

Custom Styling

The DeleteIcon accepts standard SVG attributes and the following props:

• size: Sets both width and height (in pixels)
• color: Sets the fill or stroke color
• className: Add custom CSS classes

import { DeleteIcon } from "cl-icons-library";

function StyledDeleteIcon() {
  return (
    <DeleteIcon
      size={24}
      color="#D82F7E"
      className="my-custom-icon"
      onClick={() => console.log("Icon clicked!")}
    />
  );
}

Using with CSS-in-JS libraries

import styled from "styled-components";
import { DeleteIcon } from "cl-icons-library";

const StyledIcon = styled(DeleteIcon)`
  color: ${(props) => (props.active ? "#D82F7E" : "#CCCCCC")};
  transition: color 0.2s ease;

  &:hover {
    color: #d82f7e;
  }
`;

function MyComponent({ isActive }) {
  return <StyledIcon active={isActive} size={24} />;
}

Available Icons

| Icon Name | Description | | ---------- | ------------------------------------ | | DeleteIcon | Icon for delete/remove functionality |

Adding More Icons

We plan to expand this library with additional icons in future releases. If you need a specific icon, please contact the design team.

Contributing

For cl team members who want to contribute:

1. Create your SVG icon (24x24 recommended)
2. Optimize it with SVGO
3. Add it to the src/icons directory
4. Export it in src/index.js
5. Update the version in package.json
6. Publish the new version

License

Internal use only - Copyright © 2025 cl