Icon

An icon is a small visual element, like a symbol, that represents certain functions, features, or types of content within a user interface.

import {QIcon} from "@qui/react"

Overview

QUI components use icons from Lucide, an open-source fork of Feather Icons.

Many components like the Button and Icon Button have built-in support for Lucide Icons.

Examples

Showcase

import {ReactNode} from "react"

import {ExternalLink, Eye, Search} from "lucide-react"

import {QIcon} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <div className="grid justify-center">
      <div className="q-foreground-1-primary flex gap-4">
        <QIcon icon={ExternalLink} size="l" />
        <QIcon icon={Search} size="l" />
        <QIcon icon={Eye} size="l" />
      </div>
    </div>
  )
}

Size can be customized using the size input. There are five available values: xs, s, m, l, xl. Should you need more control over the rendered size, supply a number instead which will be converted to pixels.

import {ReactNode} from "react"

import {ExternalLink} from "lucide-react"

import {QIcon} from "@qui/react"

export default function Sizes(): ReactNode {
  return (
    <div className="q-foreground-1-primary grid justify-center gap-4">
      <div className="flex items-end justify-center gap-4">
        <QIcon icon={ExternalLink} size="xs" />
        <QIcon icon={ExternalLink} size="s" />
        <QIcon icon={ExternalLink} size="m" />
        <QIcon icon={ExternalLink} size="l" />
        <QIcon icon={ExternalLink} size="xl" />
      </div>
      <div className="flex items-center justify-center gap-4">
        <QIcon icon={ExternalLink} size="32" />
        <QIcon icon={ExternalLink} size="42" />
      </div>
    </div>
  )
}

API

Props

The properties of the <svg> element also apply.

Name & Description	Option(s)	Default
icon ^* lucide-react icon.	LucideIcon
disabled If `true`, the component will not respond to click events.	boolean	false
size The size of the icon. If supplied as a number, the value will be applied as px. Otherwise, the string value of the property will apply.	\| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| string \| number	'm'

icon

Type

LucideIcon

Description

lucide-react icon.

disabled

Type

boolean

Default

false

Description

If true, the component will not respond to click events.

size

Type

| 'xs'
| 's'
| 'm'
| 'l'
| 'xl'
| string
| number

Default

'm'

Description

The size of the icon. If supplied as a number, the value will be applied as px. Otherwise, the string value of the property will apply.

Header

Icon Button