kamod-icons · Typed SVG · Multiple icon setsInstall · Compose · Explore
Find, copy, and ship production-ready icons faster
Lightweight, tree-shakeable Preact icon components across shadcn, Lucide, Heroicons, Tabler, Iconoir, and Reicon — preferred by Kamod UI blocks over lucide-preact.
Choose a consistent family for related actions and let currentColor connect the icons to your theme. Treat icons as part of a control’s meaning, with a readable label or an accessible name wherever an action would otherwise be ambiguous. Pair it with the component library when building your interface.
In this guide 9 sections
What the package brings
Choose icons for meaning first and appearance second. Keep one coherent family within a toolbar, then let size, spacing and semantic color connect it to the surrounding interface.
Choose the right approach
Pair a decorative SVG with a visible label inside a core control.
The icon reinforces the text; it should not duplicate the accessible name.
Give the surrounding button a precise aria-label and visible focus treatment.
Use a familiar symbol, but do not rely on familiarity as its only explanation.
Pair the symbol with text and use semantic theme colors.
Neither color nor shape alone should be the only way to understand a critical status.
Typed components
Every icon is a Preact SVG component with size, class, style, title, and currentColor support.
Wrap interactive icons in real buttons or links. The SVG draws the symbol; the surrounding control supplies focus, keyboard behavior and a comfortable click target.
Stable subpaths
Import from @kamod-ch/icons/shadcn, /lucide, or outline/solid variants so production builds stay explicit.
Copy the exact exported name and family from the catalog. Keep related imports together so a filled symbol is not accidentally mixed into a group of outline controls.
Design-token friendly
Icons inherit color via currentColor and fit cleanly into Kamod UI themes and blocks.
Inherit the control's text color for ordinary actions. Reserve emphasis for meaningful state, and pair error or success symbols with text rather than communicating through color alone.
Installation
Install @kamod-ch/icons with Preact as a peer dependency. There is no React runtime dependency.
pnpm add @kamod-ch/icons preactCheck your environment
Use your existing package manager and keep the peer dependencies aligned with your application. Compare package.json and your lockfile with the documentation for the version you install; add the package once at the workspace boundary that uses it.
Keep the first change small. Start with the usage example, run your project’s typecheck and build, then connect it to a real screen. The package overview helps you decide how companion libraries fit together.
Usage
Prefer explicit set imports (for example @kamod-ch/icons/shadcn). The package root currently defaults to the shadcn set.
import { SearchIcon } from "@kamod-ch/icons/shadcn";
export function Example() {
return <SearchIcon size={20} aria-hidden />;
}Read the example
Follow the value from its definition to the interface. Each part below explains a decision to keep when adapting the example.
The subpath is part of the design decision. Check the exact export in the icon catalog and keep related controls in one family; similarly named icons from different families can have different silhouettes and visual weight.
import { SearchIcon } from "@kamod-ch/icons/shadcn";The size controls the SVG, not the clickable area. Give the surrounding button enough padding and an obvious focus state. Increasing the icon itself is not a substitute for a comfortable pointer target.
<SearchIcon size={20} aria-hidden="true" />An icon-only control needs a name on the button. When visible text already names the action, keep the SVG decorative so screen readers do not announce the same meaning twice. A tooltip can clarify an action but does not replace its accessible name.
<Button aria-label="Search"><SearchIcon size={20} aria-hidden="true" /></Button>Build a consistent search action
Use a core button for interaction and a catalog icon for the visual cue. This keeps keyboard behavior, spacing and themes in the component system. The callback belongs to the surrounding application, so the example can open a dialog or navigate without assuming a router.
import { SearchIcon } from "@kamod-ch/icons/shadcn";
import { Button } from "@kamod-ch/ui";
export function SearchAction({ onSearch }: { onSearch: () => void }) {
return (
<Button variant="outline" onClick={onSearch}>
<SearchIcon size={18} aria-hidden="true" />
Search
</Button>
);
}Try the boundaries. Compare the action beside its neighbors in light and dark themes. Keep the label when there is room; if a compact toolbar hides it, supply an accessible name on the button and retain the same action and focus behavior.
Integrate with your application
Use one visual language for each group of controls. Match optical size, stroke or fill treatment, and spacing across toolbars. The SVG can stay small while the surrounding button provides a comfortable target.
Keep set imports explicit and verify the exported component name before copying an example. Use the catalog’s import snippet as your starting point; similarly named symbols from different icon sets are not necessarily interchangeable.
Let the surrounding control own the interaction. Use aria-hidden for decorative SVGs and put an aria-label on an icon-only button. Check the icon and its focus indicator against both light and dark surfaces.
Choose the owner and lifetime
Keep icon choices close to the controls that use them, or put a small domain-specific mapping in one module when the same statuses repeat. Avoid importing every icon into a runtime name lookup for a few known actions. Explicit imports make it easier to audit family choices and understand which symbols the page needs.
Account for the environment
Review the complete control under light and dark themes, browser zoom and keyboard focus. currentColor should normally follow the surrounding semantic text color. Size, stroke weight and internal SVG padding all affect perceived weight, so compare related icons at their actual rendered size rather than matching dimensions alone.
Connect the pieces. Component styles — Apply a coherent hierarchy of icon sizes, button variants and surface treatments across complete layouts.
When something behaves differently
Start with the smallest failing interaction. Compare a fresh page with the same page after a change or reload, and keep the package version in your reproduction.
- An import does not resolve
- Confirm the exact family subpath and exported name against the installed version. A similarly named icon in another library is not evidence that this package exports it.
- The symbol looks faint or misaligned
- Inspect inherited color, flex shrinking and the line height of adjacent text. Keep the SVG from shrinking in a crowded control and adjust surrounding layout before editing its paths.
- A screen reader announces an action twice
- Keep the SVG decorative when the parent already has a visible label or
aria-label. Test the control's accessible name rather than assuming an SVG title improves every use case.
If the behavior still differs from the documented API, check existing issues before opening a report. Include the expected result, actual result, package version and a small reproduction without private application data.
API Reference
This page is a Kamod UI overview. Browse every set, search icons, and copy imports from the dedicated kamod-icons docs.
Use this page to understand the integration, then consult the Full API reference on live docs for exact signatures and supported options. Compare those details with the version in your lockfile before adapting an example.
Browse the full icon catalog
Open the kamod-icons docs for set tables, usage guides, and a searchable icon browser.
- Before choosing an API: read its input types, return values and default behavior.
- Before shipping: review lifecycle or server-rendering notes for the features you use.
- When behavior differs: reduce the case to a small example and include your package version in the report.
Accessibility Notes
Decorative icons should use aria-hidden. Meaningful icons need a title or an accessible name on the surrounding control (for example aria-label on an icon-only button).
Before you ship
- Check that every icon-only action has a meaningful accessible name.
- Compare size and alignment with nearby text and icons in the same family.
- Review hover, focus and disabled states without relying on color alone.
Review the result with real content and keyboard input. Keep visible labels, loading and error feedback, and focus behavior in sync with the state your application exposes.
Take the guide with you
Keep the examples, integration decisions and troubleshooting notes together in your project, or share them with a coding assistant. This reference works with any assistant; no model-specific setup is needed. Check the installed version and your project’s conventions before applying a suggestion.
Display changes only the view. Copy and download include the complete Markdown reference.
# Icons — integration reference
Lightweight, tree-shakeable Preact icon components across shadcn, Lucide, Heroicons, Tabler, Iconoir, and Reicon — preferred by Kamod UI blocks over lucide-preact.
Package: @kamod-ch/icons
## Choose an approach
Choose icons for meaning first and appearance second. Keep one coherent family within a toolbar, then let size, spacing and semantic color connect it to the surrounding interface.
### A labeled action
Pair a decorative SVG with a visible label inside a core control.
The icon reinforces the text; it should not duplicate the accessible name.
### An icon-only action
Give the surrounding button a precise aria-label and visible focus treatment.
Use a familiar symbol, but do not rely on familiarity as its only explanation.
### A status or category
Pair the symbol with text and use semantic theme colors.
Neither color nor shape alone should be the only way to understand a critical status.
## Installation
Install @kamod-ch/icons with Preact as a peer dependency. There is no React runtime dependency.
```bash
pnpm add @kamod-ch/icons preact
```
## Starting example
```tsx
import { SearchIcon } from "@kamod-ch/icons/shadcn";
export function Example() {
return <SearchIcon size={20} aria-hidden />;
}
```
### Choose a family deliberately
The subpath is part of the design decision. Check the exact export in the icon catalog and keep related controls in one family; similarly named icons from different families can have different silhouettes and visual weight.
```tsx
import { SearchIcon } from "@kamod-ch/icons/shadcn";
```
### Separate the symbol from the target
The size controls the SVG, not the clickable area. Give the surrounding button enough padding and an obvious focus state. Increasing the icon itself is not a substitute for a comfortable pointer target.
```tsx
<SearchIcon size={20} aria-hidden="true" />
```
### Name the action once
An icon-only control needs a name on the button. When visible text already names the action, keep the SVG decorative so screen readers do not announce the same meaning twice. A tooltip can clarify an action but does not replace its accessible name.
```tsx
<Button aria-label="Search"><SearchIcon size={20} aria-hidden="true" /></Button>
```
## Build a consistent search action
Use a core button for interaction and a catalog icon for the visual cue. This keeps keyboard behavior, spacing and themes in the component system. The callback belongs to the surrounding application, so the example can open a dialog or navigate without assuming a router.
File: src/components/SearchAction.tsx
```tsx
import { SearchIcon } from "@kamod-ch/icons/shadcn";
import { Button } from "@kamod-ch/ui";
export function SearchAction({ onSearch }: { onSearch: () => void }) {
return (
<Button variant="outline" onClick={onSearch}>
<SearchIcon size={18} aria-hidden="true" />
Search
</Button>
);
}
```
Compare the action beside its neighbors in light and dark themes. Keep the label when there is room; if a compact toolbar hides it, supply an accessible name on the button and retain the same action and focus behavior.
## Ownership and environment
Keep icon choices close to the controls that use them, or put a small domain-specific mapping in one module when the same statuses repeat. Avoid importing every icon into a runtime name lookup for a few known actions. Explicit imports make it easier to audit family choices and understand which symbols the page needs.
Review the complete control under light and dark themes, browser zoom and keyboard focus. currentColor should normally follow the surrounding semantic text color. Size, stroke weight and internal SVG padding all affect perceived weight, so compare related icons at their actual rendered size rather than matching dimensions alone.
Review the finished controls together, not as isolated SVGs. Compare optical size, baseline alignment and focus visibility in the actual toolbar or navigation group.
## Troubleshooting
### An import does not resolve
Confirm the exact family subpath and exported name against the installed version. A similarly named icon in another library is not evidence that this package exports it.
### The symbol looks faint or misaligned
Inspect inherited color, flex shrinking and the line height of adjacent text. Keep the SVG from shrinking in a crowded control and adjust surrounding layout before editing its paths.
### A screen reader announces an action twice
Keep the SVG decorative when the parent already has a visible label or aria-label. Test the control's accessible name rather than assuming an SVG title improves every use case.
## Resources
- [Documentation](https://kamod-ch.github.io/kamod-icons/)
- [Source](https://github.com/kamod-ch/kamod-icons)
- [npm](https://www.npmjs.com/package/@kamod-ch/icons)
Sources & attribution
This integration guide accompanies @kamod-ch/icons, maintained in the Kamod ecosystem. The dedicated documentation is the reference for package APIs; examples here show how those APIs fit into a Kamod UI application.
Icon artwork can carry its own upstream notices. Check the selected family’s source and license information in the repository before redistributing assets; the package’s license does not replace notices attached to individual icon sets.
When copying or distributing source, retain the applicable license and attribution notices from the version you use. Check the published package alongside your lockfile when comparing an example with a newer release.