Elegant and Open-Source Icon Library
Discover over 700 beautifully crafted SVG icons, customizable to fit any project.

Browse Lsicon.com →

Installation

The icon component library is independently provided via npm. To use the icon library components, you need to install @wisdesign/lsicon separately.

npm

$ npm install @wisdesign/lsicon --save

yarn

$ yarn add @wisdesign/lsicon

pnpm

$ pnpm install @wisdesign/lsicon --save

Basic Usage

import { LeftIcon } from '@wisdesign/lsicon'
 
function () {
  return <LeftIcon />
}

Style

//Javascript
import { UrgencyIcon, UrgencyFilledIcon } from "@wisdesign/lsicon";
 
function () {
  return (
    <>
      <UrgencyIcon className={styles.one} />
      <UrgencyFilledIcon className={styles.two} />
      <UrgencyIcon className={styles.three} />
    </>
  )
}

/* CSS */
.one {
  font-size: 24px;
  color: #4f46e5;
  padding-right: 16px;
}
 
.two {
  font-size: 32px;
  color: black;
  padding-right: 16px;
}
 
.three {
  font-size: 40px;
  color: #64748b;
  padding-right: 16px;
}

Contribution

If you want to fix an icon error or add a new icon:

1. Please first check the Issue list to confirm whether someone has already raised the same or similar issue.
2. If not, you can create a new Issue, detailing the problem you encountered or your suggestions.

Icon errors could include issues with the outline/filled types, icon sizes not aligning with the 16px grid standard, ambiguous naming, etc.

For adding new icons, please ensure that the new icons have a universal appeal. At the moment, we do not accept requests for personalized icons.

License

This library is MIT licensed.