Icon

An icon component powered by Iconify, supporting thousands of icons from popular icon sets.

Basic Usage

dart
1
2
3
4
5
DIcon(name: 'lucide:home')
DIcon(name: 'lucide:user')
DIcon(name: 'lucide:settings')
DIcon(name: 'lucide:mail')
DIcon(name: 'lucide:heart')

Using DIconNames

Duxt UI provides DIconNames class with commonly used icon names for convenience.

dart
1
2
3
4
5
DIcon(name: DIconNames.home)
DIcon(name: DIconNames.user)
DIcon(name: DIconNames.settings)
DIcon(name: DIconNames.mail)
DIcon(name: DIconNames.heart)

Sizes

xs
sm
md
lg
xl
dart
1
2
3
4
5
DIcon(name: DIconNames.star, size: DIconSize.xs)  // 16px
DIcon(name: DIconNames.star, size: DIconSize.sm)  // 20px
DIcon(name: DIconNames.star, size: DIconSize.md)  // 24px (default)
DIcon(name: DIconNames.star, size: DIconSize.lg)  // 32px
DIcon(name: DIconNames.star, size: DIconSize.xl)  // 40px

Colors

dart
1
2
3
4
5
DIcon(name: DIconNames.heart, color: 'text-red-500')
DIcon(name: DIconNames.check, color: 'text-green-500')
DIcon(name: DIconNames.warning, color: 'text-yellow-500')
DIcon(name: DIconNames.info, color: 'text-blue-500')
DIcon(name: DIconNames.star, color: 'text-purple-500')

Icon Sets

DIcon supports all Iconify icon sets. Use the format "set:icon-name".

lucide
heroicons
mdi
tabler
phosphor
dart
1
2
3
4
5
DIcon(name: 'lucide:rocket')
DIcon(name: 'heroicons:rocket-launch')
DIcon(name: 'mdi:rocket')
DIcon(name: 'tabler:rocket')
DIcon(name: 'ph:rocket')

Navigation Icons

dart
1
2
3
4
5
6
DIcon(name: DIconNames.chevronLeft)
DIcon(name: DIconNames.chevronRight)
DIcon(name: DIconNames.chevronUp)
DIcon(name: DIconNames.chevronDown)
DIcon(name: DIconNames.arrowLeft)
DIcon(name: DIconNames.arrowRight)

Action Icons

dart
1
2
3
4
5
6
7
8
DIcon(name: DIconNames.plus)
DIcon(name: DIconNames.minus)
DIcon(name: DIconNames.close)
DIcon(name: DIconNames.check)
DIcon(name: DIconNames.edit)
DIcon(name: DIconNames.trash)
DIcon(name: DIconNames.search)
DIcon(name: DIconNames.copy)

Status Icons

dart
1
2
3
4
DIcon(name: DIconNames.success, color: 'text-green-500')
DIcon(name: DIconNames.error, color: 'text-red-500')
DIcon(name: DIconNames.warning, color: 'text-yellow-500')
DIcon(name: DIconNames.info, color: 'text-blue-500')

With Buttons

dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
DButton(
  label: 'Settings',
  leadingIcon: DIcon(name: DIconNames.settings, size: DIconSize.sm),
)

DButton(
  label: 'Download',
  trailingIcon: DIcon(name: DIconNames.download, size: DIconSize.sm),
)

DButton(
  label: 'Send',
  leadingIcon: DIcon(name: DIconNames.send, size: DIconSize.sm),
  color: DButtonColor.success,
)

Available DIconNames

home
user
users
settings
search
mail
bell
calendar
clock
heart
star
bookmark
file
folder
image
video
link
externalLink
github
code
terminal
database
server
globe
sun
moon
loader
menu

API Reference

Prop Type Default Description
name String required Iconify icon name (e.g., "lucide:home")
size DIconSize md Icon size (xs, sm, md, lg, xl)
color String? null Tailwind color class (e.g., "text-red-500")
classes String? null Additional CSS classes

Size Reference

Size Value Pixels
DIconSize.xs size-4 16px
DIconSize.sm size-5 20px
DIconSize.md size-6 24px
DIconSize.lg size-8 32px
DIconSize.xl size-10 40px