Icons

Available Icons

Installation

npm install --save @gladio/icons

Usage

import { InfoSolid } from "@gladio/icons"
function App () {
  return <InfoSolid />
}

Playground

Code Editor

<Button primary branded>
  <Icons.Cancel /> Cancel
</Button>

<Button primary branded>
  <Icons.Cancel /> Cancel
</Button>

Props

All the icons are SVG components and so accepts all the SVG props. Along with SVG props, following props are accepted as well:

title

type: string

To make icons accessible when there is not text associated with the icon, you can provide a title prop to the icons.

Code Editor

<Icons.Cancel title="Cancel the procces" />

<Icons.Cancel title="Cancel the procces" />

rotate

oneOf: "90" | "180" | "270"

You can rotate icons by passing a rotate prop for some use cases where icon is provided for only one direction e.g. Icons.ChevronDown

Code Editor

<Button primary branded>
  Next <Icons.ChevronDown rotate="270" />
</Button>

<Button primary branded>
  Next <Icons.ChevronDown rotate="270" />
</Button>

Styles

You can style the icons with our design system props as you would style any normal component.

Code Editor

<>
  <Icons.Star textColor="yellow-600" marginRight="1" />
  <Icons.Star textColor="gray-300" />
</>

<>
  <Icons.Star textColor="yellow-600" marginRight="1" />
  <Icons.Star textColor="gray-300" />
</>

Available Icons

Bellow is the list of available icons. Each icon has a label which represents the import name for that icon.

Airplane

ArrowExpand

AttentionSolid

Attention

BadgeCheckSolid

Ban

Bed

Bus

Calendar

CancelCircleSolid

Cancel

ChevronDown

Cog

DocumentDownload

Document

DotsVertical

Duplicate

Home

InfoSolid

Info

LightBulb

LightlingBoltSolid

LightlingBolt

LocationMarker

Logout

Mail

MinusCircle

OkCircleSolid

Pencil

Phone

PlusCircle

Plus

Refresh

Rupee

Sliders

Spinner

StarEmpty

Star

SwitchHorizontal