# Icon

Lucide icons with size, color and accessible labels.

## How to use it

Import an icon from lucide-react and pass it as icon={Check}. On native, use lucide-react-native and Icon from @kivora/native inside KivoraProvider. size, color, strokeWidth and label work on both platforms. Omit label when text accompanies the icon; add it when the icon conveys information on its own. On web you can also use className.



## Import


```tsx
import { Icon } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<Icon icon={Check} label="Completed" size={24} color="#16a34a" />
```


## Sizes

```tsx
<div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
  <Icon icon={Heart} size={16} label="Small favorite" /><Icon icon={Heart} size={24} label="Medium favorite" /><Icon icon={Heart} size={40} label="Large favorite" />
</div>
```


## Color and stroke

```tsx
<div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
  <Icon icon={Check} color="#16a34a" strokeWidth={3} label="Completed" /><Icon icon={Heart} className="text-destructive" strokeWidth={1} label="Favorite" />
</div>
```


## Inside a button

```tsx
<Button><Icon icon={Search} size={16} />Search</Button>
```


## API: Icon


```typescript
Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| icon | LucideIcon | Yes | Lucide component to render, imported from lucide-react. |
| absoluteStrokeWidth | boolean | No | See the published type. |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| id | string | No | Element identifier; associates labels and descriptions. |
| label | string | No | Text or accessible label. |
| max | string \| number | No | Maximum allowed value. |
| min | string \| number | No | Minimum allowed value. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<SVGSVGElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<SVGSVGElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<SVGSVGElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| size | string \| number | No | Visual size of the component. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| type | string | No | Operation type or mode; values depend on the component. |

Source: https://kivora.pro/docs/componentes/icon