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 {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

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

Icon

Overview

Examples

Showcase

Sizes

API

<Icon>