Components
icon

Icon

Iconify icon wrapper with size and color variants.

Demo

import { Icon } from "@/components/jk/icon"

export const IconDemo = () => {
    return (
        <div className="flex flex-wrap items-center gap-2">
            <Icon name="ph--house" />
            <Icon name="ph--user" />
            <Icon name="ph--gear" />
            <Icon name="ph--bell" />
        </div>
    )
}

Installation

terminal

npx shadcn@latest add @jk-ui/icon

Usage

The Icon component provides a simple wrapper around Iconify icons. Use the name prop to specify the icon class, size for predefined sizes, and intent for semantic colors.

Examples

Sizes

import { Icon } from "@/components/jk/icon"

export const IconSizes = () => {
    return (
        <div className="flex flex-wrap items-center gap-2">
            <Icon name="ph--star" size="xs" />
            <Icon name="ph--star" size="sm" />
            <Icon name="ph--star" />
            <Icon name="ph--star" size="lg" />
            <Icon name="ph--star" size="xl" />
            <Icon name="ph--star" size="2xl" />
        </div>
    )
}

Intents

import { Icon } from "@/components/jk/icon"

export const IconCommon = () => {
    return (
        <div className="flex flex-wrap items-center gap-2">
            <Icon name="ph--house" />
            <Icon name="ph--user" intent="primary" />
            <Icon name="ph--check-circle" intent="success" />
            <Icon name="ph--warning" intent="warning" />
            <Icon name="ph--x-circle" intent="danger" />
            <Icon name="ph--info" intent="secondary" />
            <Icon name="ph--question" intent="muted" />
        </div>
    )
}

API

Prop	Type	Description
name	`string`	The Iconify icon class name (e.g., ph--house, ph--user).
size	`xs \| sm \| md \| lg \| xl \| 2xl`	Predefined size for the icon.
intent	`current \| fg \| muted \| primary \| secondary \| success \| warning \| danger`	Semantic color intent for the icon.

Edit this page

Text

Semantic text component with intent-based styling.