Icon Component

The Icon component provides a consistent way to display vector icons throughout the application. Icons enhance visual communication and help users identify actions and information.

Icon Gallery

play

dashboard

demos

playlists

personas

contacts

switch

transcript

presenter

music

background

visuals

import

export

plus

check-circle

folder

trash

upload

download

Sizes

Small

Medium

Large

X-Large

Code Example
// Small icon
<Icon name="play" className="w-4 h-4" />

// Medium icon
<Icon name="play" className="w-6 h-6" />

// Large icon
<Icon name="play" className="w-8 h-8" />

// X-Large icon
<Icon name="play" className="w-12 h-12" />

Colors

Default

Primary

Error

Success

Code Example
// Default color
<Icon name="dashboard" className="w-8 h-8 text-gray-500" />

// Primary color
<Icon name="dashboard" className="w-8 h-8 text-primary-500" />

// Error color
<Icon name="dashboard" className="w-8 h-8 text-red-500" />

// Success color
<Icon name="dashboard" className="w-8 h-8 text-green-500" />

Usage Guidelines

Here are some guidelines for using icons effectively:

  • Use icons consistently throughout your application to establish a visual language.
  • Pair icons with text labels when introducing new functionality to ensure clarity.
  • Use appropriate sizes based on context - smaller for inline text, larger for buttons or standalone elements.
  • Maintain appropriate color contrast for accessibility.
  • Choose icons that clearly communicate their purpose or action.