Styles

Icon

Display exaBase Design System Icons.

import { FaceSmilingIcon } from "@exawizards/exabase-design-system-icons-react"

export default function IconDemo() {
  return <FaceSmilingIcon className="size-8" />
}

Installation

Install exaBase Design System Icons:

npm install @exawizards/exabase-design-system-icons-react

Usage

import { FaceSmilingIcon } from "@exawizards/exabase-design-system-icons-react"

export default function IconDemo() {
  return <FaceSmilingIcon />
}

Examples

Size

import { CircleIcon } from "@exawizards/exabase-design-system-icons-react"

export default function IconSize() {
  return (
    <div className="flex flex-wrap gap-2">
      <CircleIcon className="size-2" />
      <CircleIcon />
      <CircleIcon className="size-6" />
      <CircleIcon className="size-8" />
    </div>
  )
}

Color

import { ChevronDownCircleFillIcon } from "@exawizards/exabase-design-system-icons-react"

export default function IconColor() {
  return (
    <div className="flex gap-2">
      <ChevronDownCircleFillIcon />
      <ChevronDownCircleFillIcon className="fill-primary" />
    </div>
  )
}

Elevation

Offers a set of elevations consisting of border and shadows.

Rounded

Next Page

On this page

InstallationUsageExamplesSizeColor