Icon

Icons are small visual elements, like symbols, that represent certain functions, features, or types of content within a user interface.

import {Icon} from "@qualcomm-ui/react/icon"

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

Brand

<Icon icon={ExternalLink} size="lg" />
<Icon icon={Search} size="lg" />
<Icon icon={Eye} size="lg" />

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

Brand

import type {ReactNode} from "react"

import {ExternalLink} from "lucide-react"

import {Icon} from "@qualcomm-ui/react/icon"

export function IconSizesDemo(): ReactNode {
  return (
    <div className="q-foreground-1-primary grid justify-center gap-4">
      <div className="flex items-end justify-center gap-4">
        <Icon icon={ExternalLink} size="xs" />
        <Icon icon={ExternalLink} size="sm" />
        <Icon icon={ExternalLink} size="md" />
        <Icon icon={ExternalLink} size="lg" />
        <Icon icon={ExternalLink} size="xl" />
      </div>
      <div className="flex items-center justify-center gap-4">
        <Icon icon={ExternalLink} size={32} />
        <Icon icon={ExternalLink} size={42} />
      </div>
    </div>
  )
}

API

<Icon>

The properties of the <svg> element also apply.

Renders a lucide-react icon <svg> element.

Prop	Type	Default
icon ^* lucide-react icon.	LucideIcon
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' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| string \| number	'md'

icon

Type

LucideIcon

Description

lucide-react icon.

size

Type

| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| string
| number

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.

Attribute / Property	Value
`className`	'qui-icon__root'
`data-size`	\| string \| number
`style`	CSSProperties

Header Bar

Link