Lism CSS
Docs
Search

Icon (a--icon)

a--icon is a class for displaying icon elements.

CSS

.a--icon {
  flex-shrink: 0; // アイコンはflex直下の子要素にしたい場合が多いのでデフォルトで適用する
}

/* fill指定のない svg にテキストカラーを継承させる */
.a--icon:where(:not([fill])) {
  fill: currentcolor;
}

/* 属性によるサイズ指定がない場合は 1em サイズが基本　*/
.a--icon:where(:not([width])) {
  width: 1em;
  height: 1em;
}

Lism Component

<Icon> automatically adds aria-label and role="img" when label is specified, or aria-hidden="true" when it is not.

Import

import { Icon } from 'lism-css/react';

HTML Structure

The actual tag rendered varies between svg, img, and others depending on how icon, viewBox, src, and as are specified, but the rules for adding aria-hidden/aria-label are the same across all of them.

svg.a--icon[aria-hidden="true"]


or


svg.a--icon[aria-label="..."][role="img"]

Props

Prop Description
icon An icon component, an SVG string, or an object in the form {as, ...exProps}.
size Default SVG width and height. Explicit width and height take precedence.
label Output as aria-label. When specified, role="img" is also added; when omitted, aria-hidden="true" is output instead.

Usage

Using @lism-css/icons

@lism-css/icons is a collection of SVG icons for React and Astro from the creators of Lism CSS. Since lism-css itself does not include icon SVG data, install the package separately and pass the components you need to icon.

See the @lism-css/icons page for installation instructions and the icon list.

Import from @lism-css/icons/react for React or @lism-css/icons/astro for Astro.

↓
Specifying icon components
import { Cluster, Icon } from 'lism-css/react';
import { LightbulbIcon, WarningIcon } from '@lism-css/icons/react';


<Cluster g="15">
  <Icon icon={LightbulbIcon} size="40px" />
  <Icon icon={WarningIcon} fz="2xl" c="blue" />
</Cluster>

Use c to set the color. See the @lism-css/icons guide for stroke width and weight options.

Using as and exProps

You can also use the standard Lism component prop as instead of icon={HomeIcon}.

↓
Specifying an icon component via as
import { HomeIcon } from '@lism-css/icons/react';
import { Icon } from 'lism-css/react';


<Icon as={HomeIcon} size="2em" />

Use exProps to group props passed to the imported icon component. The following example sets its stroke width and size.

↓
Specifying props for HomeIcon
<Icon as={HomeIcon} exProps={{ strokeWidth: 2, size: '3em' }} c="blue" />

Combining as and exProps into icon

In <Icon>, you can also pass as and exProps together in the following format:

<Icon icon={{as:Component, exProps1, exProps2, ...}} />
↓
Example of specifying as and exProps together via icon
<Icon icon={{as:HomeIcon, strokeWidth:2, size:'3em'}} c="blue" />

You can use icons from third-party packages such as react-icons and @phosphor-icons/react through icon or as in the same way. To use React icons in Astro, enable the React integration in Astro.

Passing an SVG string

You can pass a complete SVG string starting with <svg to icon, including attributes such as viewBox and stroke width.

<Icon icon={'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m5 12 4 4L19 6" /></svg>'} c="green" />

Writing SVG directly

<Icon> is rendered as <svg> when a viewBox prop is specified. You can place path elements and other SVG content directly as children.

↓
Passing path and other elements directly as children
<Icon viewBox="0 0 256 256" label="SmileyIcon icon" fz="4xl" c="blue">
  <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z"></path>
</Icon>

Using src to specify an image

↓
Usage example
Img icon.
<Flex g="10" ai="center">
  <Icon fz="2xl" src="https://emojix.s3.ap-northeast-1.amazonaws.com/g3/svg/1f916.svg" alt="image" />
  <span>Img icon.</span>
</Flex>

© 2026 Lism CSS.