Usage
Thanks to Iconify, Pictum brings open-source icon sets together in one catalog. Browse the Iconify icon gallery to choose an icon, then use its lowercase kebab-caseprefix:name identifier, such as lucide:sparkles.
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
330,000+ icons, ready when you are
prefix:name identifier, such as lucide:sparkles.
import { Icon } from "@pictum/react";
export function Example() {
return (
<Icon
name="lucide:sparkles"
aria-label="Sparkles"
className="size-6 text-violet-600"
/>
);
}
import { useIcon } from "@pictum/react";
export function Example() {
const asset = useIcon("lucide:sparkles");
return <img src={asset.url} alt="Sparkles" width={24} height={24} />;
}
Icon uses an internal Suspense boundary while it loads the inline SVG.name prop or hook argument identifies the icon using exact lowercase kebab-case prefix:name syntax.<svg>.