Icon | Qasa Design System

Each icon is a separate component. See all available icons in the Iconography page.

Examples

Sizes

Adjust the size of the icon by setting the size prop.

Color

Icon has a color-prop that accepts string representing a theme icon color. It also accepts "currentColor" which makes the Icon inherit the text color of the parent element.

"default"

"positive"

"warning"

"negative"

"disabled"

"strong"

"subtle"

"onBrandPrimary"

"onBrandTertiary"

"currentColor"

Library

See all available icons in the Iconography page.

Create custom icons

There are two ways to create custom icons. Both will generate a component that can be used the same way as any other icon component exported from QDS.

1. Using `createLucideIcon` (recommended)

Pass a Lucide icon-component into the createLucideIcon-function to create a custom icon component.

import { Sun } from 'lucide-react'
import { createLucideIcon } from '@qasa/qds-ui'
 
const SunIcon = createLucideIcon(Sun)

2. Using `createIcon`

For custom SVG paths, use the createIcon-function to create a custom icon component, given that you have the SVG definition. See details on what options to use in the createIcon API.

Use sparingly

Mainly to be used when in need of filled-in icons. Lucide doesn't support filled in icons, so we create them as SVG:s by hand in Figma based on the non-filled variant from Lucide.

import { createIcon } from '@qasa/qds-ui'
 
// Using the `d` value of a path (the path definition) directly
const SunIcon = createIcon({
  viewBox: '0 0 448 512',
  d: 'M272 304h-96C78.8 304 0 382.8 0 480c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32 0-97.2-78.8-176-176-176zM48.99', 
  displayName: 'SunIcon',
})
 
// or using the path parameter if the icon consists of multiple paths
const SunIcon = createIcon({
  viewBox: '0 0 448 512',
  path: [
    <circle cx="50" cy="50" r="50" />, 
    <path d="M448 480H0V400c0-88.4 71.6-160 160-160s160 71.6 160 160v80z" />, 
  ],
  displayName: 'SunIcon',
})

API Reference

Props

Prop	Default	Description
`size?`	`24`	`IconSize` The size of the icon.
`color?`	`'default'`	`IconColor` The color of the icon.

`createIcon()` options

Prop	Default	Description
`d?`	-	`string` If the `svg` has a single path, simply copy the path's `d` attribute
`displayName?`	-	`string` The display name of the icon. Useful for debugging and internal use.
`path?`	-	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ReactElement<unknown, string \| JSXElementConstructor<any>>[]` The `svg` path or group element
`viewBox`	-	`string` The `svg`'s `viewBox` attribute