@slithy/icons

React SVG icon components. Includes an Icon wrapper for consistent sizing, scaling, and SVG prop passthrough, plus named exports for all icons when you need them directly.

Installation

npm install @slithy/icons

Peer dependencies: react@^17 || ^18 || ^19

Icon

The primary way to use icons. Accepts a string key (IconName) or a custom component for one-off icons not in the library.

import { Icon } from '@slithy/icons'

<Icon icon="ChevronDown" />
<Icon icon="Settings" size={20} />
<Icon icon="Close" strokeWidth={1.5} />
<Icon icon="Menu" inline />

Props:

| Prop | Type | Default | Description | |---|---|---|---| | icon | IconName \| FC<IconProps> | — | Icon to render — string key or a custom component | | size | number | 24 | Width and height in pixels. Multiplied by --slithy-font-scale if set | | strokeWidth | number | 2 | SVG stroke width | | inline | boolean | false | Sets display: inline-block and corrects vertical alignment for use in text | | className | string | — | Added to the SVG element alongside the internal slithy-icon class | | style | CSSProperties | — | Merged into the SVG element's style | | data-testid | — | icon name | Auto-set to the icon name string; omitted for custom component icons | | ...SVGProps | | | All standard SVG attributes pass through to the element |

Font scaling

Set --slithy-font-scale on a parent to scale icons with user font size preferences. Defaults to 1 if unset, so sizing is stable without it.

:root {
  --slithy-font-scale: 1.25; /* icons render 25% larger */
}

One-off icons

Pass a component directly for icons not in the library:

import { Icon } from '@slithy/icons'
import { MyCustomIcon } from './MyCustomIcon'

<Icon icon={MyCustomIcon} size={20} />

The component must accept IconProps (size, strokeWidth, and any SVG attributes).

Direct imports

All icons are also available as named exports if you don't need the Icon wrapper:

import { ChevronDown, Settings, Close } from '@slithy/icons'

<ChevronDown size={20} strokeWidth={1.5} onClick={handler} />

IconName

Union type of all valid icon name strings. Derived automatically from the icon library — stays in sync as icons are added.

import type { IconName } from '@slithy/icons'

interface Props {
  icon: IconName
}

IconProps

The prop interface for individual icon components. Extends SVGProps<SVGSVGElement> with size and strokeWidth.

import type { IconProps } from '@slithy/icons'
import type { FC } from 'react'

const MyIcon: FC<IconProps> = ({ size = 24, strokeWidth = 2, ...svgProps }) => (
  <svg width={size} height={size} strokeWidth={strokeWidth} {...svgProps}>
    {/* ... */}
  </svg>
)

Icon list

ChevronDown · ChevronRight · ChevronsRight · Circle · Clipboard · Close · CloseCircle · ColorFilter · ColorPicker · ColorWheel · Computer · Copy · CubeScan · Dice1 · Dice2 · Dice3 · Dice4 · Dice5 · Dice6 · Download · Fish · Flash · Flower · Fog · Folder · Grid · HeavyRain · Heptagon · Hexagon · HexagonMinus · HexagonPlus · HorizontalSplit · Image · Image2 · ImageFolder · ImageList · InfoCircle · Jellyfish · Leaf · Menu · Moon · MoreHorizontal · Number0–Number9 · Octagon · Pause · Pentagon · Play · Rain · RefreshCw · Rhombus · SeaAndSun · SeaWaves · Separations · Settings · Sidebar · Sliders · SlidersH · SplitCircle · Square · Stop · Sun · Thunderstorm · Tree · Triangle · Umbrella · Upload · WindLines · Wolf · Wrench