@lism-css/icons

@lism-css/icons is a collection of SVG icons for React and Astro from the creators of Lism CSS. It includes stroke and fill icons, and also works in projects that do not use Lism CSS.

Installation

pnpm add @lism-css/icons

Basic usage

Component names end in Icon, such as BookIcon and HeartFillIcon.

In React, import icons from /react.

import { BookIcon, HeartFillIcon } from '@lism-css/icons/react';

export function Example() {
  return (
    <>
      <BookIcon size={24} strokeWidth={2} aria-label="Book" />
      <HeartFillIcon size="1.5em" aria-label="Favorite" />
    </>
  );
}

In Astro, import icons from /astro.

---
import { BookIcon, HeartFillIcon } from '@lism-css/icons/astro';
---

<BookIcon size={24} stroke-width={2} aria-label="Book" />
<HeartFillIcon size="1.5em" aria-label="Favorite" />

Set the width and height together with size (default 1em); explicit width or height takes precedence. Icons inherit the surrounding text color.

Icons are hidden from screen readers by default. When an icon conveys meaning on its own, provide an aria-label as shown above.

Stroke width

Stroke icons use a 24-unit grid and default to a stroke width of 1.5. Use weight to select their thickness.

import { InfoIcon } from '@lism-css/icons/react';

<InfoIcon weight="light" />
<InfoIcon weight="regular" />
<InfoIcon weight="bold" />
<InfoIcon weight="bold" strokeWidth={1.25} />

Astro supports the same weight values. To set a stroke width directly, use strokeWidth in React, or stroke-width or strokeWidth in Astro. An explicit stroke width overrides weight; in Astro, stroke-width takes precedence when both spellings are supplied.

weight does not switch between stroke and fill icons. Stroke width does not change the thickness of fill-only icons such as HeartFillIcon. For icons that combine fills and strokes, such as NoteFillIcon, it applies to the stroke.

Using icons with Lism CSS

Pass an icon to the Lism CSS Icon component to use Lism Props such as c and fz. The same example works in React by changing both import paths to /react.

---
import { Icon } from 'lism-css/astro';
import { BookIcon } from '@lism-css/icons/astro';
---

<Icon icon={BookIcon} fz="2xl" c="blue" weight="bold" />

All icons are original works and released under the MIT license. See the package README for details.

Icon list