Iconography Standard

Lucide Icon Set

Standardized icon system for kohl.design built with Lucide. Pre-configured with a default optical size of 20×20px and a graceful, refined stroke width of 1.5px.

Live Icon Customizer

size: 20px · stroke: 1.5px · intent: default

Stroke Width (Default: 1.5px)

Size (Default: 20px)

Color Intent

Showing 76 of 76 icons

Usage & Code Patterns

How to use the default 20px / 1.5px stroke width Lucide specification in your projects.

Pattern 1 (Recommended)

The Design System <Icon /> Component

Wrap any Lucide icon in the design system wrapper. Automatically enforces 20x20px and 1.5px stroke width.

import { Icon } from "@/components/ui/icon"
import { ArrowRight, Sparkles } from "lucide-react"

// Default (20px, 1.5px strokeWidth)
<Icon icon={ArrowRight} />

// With color intent or custom size
<Icon icon={Sparkles} intent="primary" size={24} />

Pattern 2

Direct Lucide Import with System Constants

Use Lucide directly while keeping consistent tokens via exported constants.

import { DEFAULT_ICON_SIZE, DEFAULT_ICON_STROKE_WIDTH } from "@/components/ui/icon"
import { ArrowRight } from "lucide-react"

<ArrowRight 
  size={DEFAULT_ICON_SIZE} /* 20 */
  strokeWidth={DEFAULT_ICON_STROKE_WIDTH} /* 1.5 */
  className="text-primary"
/>