Icon

Usage

import { Icon } from "chakra-ui-solid";

<Icon />

Chakra ships no icons of its own, and neither do we. Icon styles a glyph you bring — from an icon library, from a pasted svg, or from createIcon below.

Examples

Icon libraries

Pass the glyph component as as, and Icon sizes and colours it.

No icon package supports SolidJS 2.0 yet, so the glyphs above are this site’s own — SVG path data copied out of Lucide, each one a small component wrapping a leaf svg. That is the same shape a published icon package would have, so this page changes only its imports the day one exists.

as is where Chakra’s React version writes the glyph as a child. Both spellings mean the same thing there — the child one is asChild, which re-creates the child element with Icon’s computed props merged in. SolidJS has no equivalent: a child is an already-constructed DOM node by the time Icon sees it, so a glyph nested as a child keeps its own svg and ignores size, and as is the spelling that puts the recipe on the element that actually draws.

// ✅ one svg, and the recipe is on the element that draws
<Icon as={HeartIcon} size="lg" />
 
// ❌ two svgs, and `size` sizes the outer one while the glyph inside ignores it
<Icon size="lg">
  <HeartIcon />
</Icon>

Custom svg

Use the render prop to render your own svg rather than nesting one inside Icon’s.

This is what Chakra’s React version spells asChild. The callback is handed the computed props — the recipe’s class, the style props, the ref — and places them on the element you write.

Create Icon

Use the createIcon utility for a glyph you reuse enough to name.

path is a function returning the glyph’s elements, where Chakra’s React version takes the elements directly. A JSX value there would be built when the module loads rather than when the component renders, which takes a server-rendered route down before anything reaches the page.

For a single-path glyph, d is the shorthand:

const DotIcon = createIcon({ d: "M12 12h.01" });

viewBox defaults to 0 0 24 24, and defaultProps supplies any Icon prop the caller leaves unset:

const WideIcon = createIcon({
  viewBox: "0 0 32 32",
  d: "M16 16h.01",
  defaultProps: { size: "sm" },
});

Props