---
title: "Icon"
description: "Icon with sizes and variants"
source: "Equality"
---
import React from "react";
import { Icon } from "@eqtylab/equality";
import { IconDemo } from "@demo/components/demo/icon";
import { ELEVATION } from "@eqtylab/equality";

## Sizes

---

### Extra Small

<Icon icon="Shield" size="xs" client:only="react" />

### Small

<Icon icon="Shield" size="sm" client:only="react" />

### Medium (default)

<Icon icon="Shield" client:only="react" />

### Large

<Icon icon="Shield" size="lg" client:only="react" />

## Background

---

### Transparent (default)

<Icon icon="Shield" client:only="react" />

### Square

<Icon icon="Shield" client:only="react" background="square" />

### Circle

<Icon icon="Shield" client:only="react" background="circle" />

## Icons

---

### Lucide React

<Icon icon="BadgeInfo" client:only="react" background="circle" />

### Custom Icons

<IconDemo client:only="react" />

## Elevations

### Sunken

<Icon
  icon="Shield"
  client:only="react"
  background="square"
  elevation={ELEVATION.SUNKEN}
/>

### Base

<Icon
  icon="Shield"
  client:only="react"
  background="square"
  elevation={ELEVATION.BASE}
/>

### Raised (default)

<Icon
  icon="Shield"
  client:only="react"
  background="square"
  elevation={ELEVATION.RAISED}
/>

### Overlay

<Icon
  icon="Shield"
  client:only="react"
  background="square"
  elevation={ELEVATION.OVERLAY}
/>

### Floating

<Icon
  icon="Shield"
  client:only="react"
  background="square"
  elevation={ELEVATION.FLOATING}
/>