Design System

Icons

The Integral design system uses Lucide Icons, a beautiful and consistent open-source icon library with over 1,000+ icons. Lucide provides clean, pixel-perfect icons that integrate seamlessly with React and Chakra UI.

Size Variants

Icons can be sized using Chakra's boxSize prop:

boxSize="4"

16px

boxSize="5"

20px

boxSize="6"

24px

boxSize="8"

32px

boxSize="10"

40px

Color Usage

Use semantic tokens for consistent color application:

text.main

text.muted

brand.600

green.600

amber.600

red.600

Brand

1 icons

Integral Intelligence

IntegralIcon

Navigation

7 icons

Home

LuHouse

LuMenu

Chevron Left

LuChevronLeft

Chevron Right

LuChevronRight

Chevron Up

LuChevronUp

Chevron Down

LuChevronDown

External Link

LuExternalLink

Interface Actions

9 icons

LuSearch

Settings

LuSettings

Bell

LuBell

Plus

LuPlus

Minus

LuMinus

LuX

Check

LuCheck

Filter

LuFilter

Refresh

LuRefreshCw

Editing & Files

7 icons

Pencil

LuPencil

Copy

LuCopy

Trash

LuTrash2

File

LuFile

File Text

LuFileText

Upload

LuUpload

Download

LuDownload

Design System

8 icons

Palette

LuPalette

Network

LuNetwork

Typography

LuType

Ruler

LuRuler

Image

LuImage

Layers

LuLayers

Columns

LuColumns2

Panel

LuPanelLeft

Status & Feedback

5 icons

Success

LuCircleCheck

Warning

LuTriangleAlert

Error

LuCircleX

Alert

LuCircleAlert

Info

LuInfo

Users & Security

5 icons

User

LuUser

Users

LuUsers

Shield

LuShield

Eye

LuEye

Eye Off

LuEyeOff

Content & Layout

4 icons

Table

LuTable

Message

LuMessageCircle

Book

LuBookOpen

Pointer

LuMousePointer

Theme

2 icons

Light Mode

LuSun

Dark Mode

LuMoon

Browse Full Icon Library

Explore over 1,000+ icons in the complete Lucide library. Search, copy, and use any icon in your project.

Visit lucide.dev/icons/categories →