Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

@livechat/design-system-icons

Package Overview
Dependencies
Maintainers
70
Versions
96
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@livechat/design-system-icons

latest
npmnpm
Version
2.33.0
Version published
Weekly downloads
1.7K
-16.9%
Maintainers
70
Weekly downloads
 
Created
Source

LiveChat Design System Icons

npm version icons Workflow status badge

The icons package provides a collection of icons that can be used to enhance the visual appeal of your applications. These icons are designed to be customizable and easy to incorporate into your projects.

Installation

Run the following command using npm (or with you other favorite package manager, eg. yarn):

npm install @livechat/design-system-icons --save

Basic usage

To use icons simply import them from the package:

import { Edit } from '@livechat/design-system-icons';

<Edit />;

But our icons are designed to be used in conjunction with our components library, @livechat/design-system-react-components. To use them in this manner, you need to install both packages. Please also refer to the installation guide for the LiveChat React Components package.

npm install @livechat/design-system-react-components @livechat/design-system-icons --save

And then import them like this:

import { Edit } from '@livechat/design-system-icons';
import { Icon } from '@livechat/design-system-react-components';

<Icon source={Edit} kind="primary" />;

Adding new icons

  • To install all necessary dependencies, run the following command:

    npm install
    
  • Next you need to prepare a SVG by replacing all color values in the stroke or/and fill attributes with currentcolor value. This will allow us to change the color of the icon using the color css property.

  • To add a new icon, you need to add a prepared SVG file to the ./svg directory. The file name should be in the snake_case format with -filled addition in the name for filled icon variants.

  • Then add new prop to IconsData in format <icon-name>: <icon-group-name>;.

  • Commit your changes and create a pull request. ⚠️ Commit message should follow the Conventional Commits naming pattern feat(icons): add new icon. ⚠️ This is crucial as, post squash merging, Git will use the PR name as the commit message.

  • After the pull request is merged, the changes will be published by the Design System team in the next release.

FAQs

Package last updated on 01 Oct 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts