# Icon

> Lucide icons by name, and SVG images. A native Pyzed component for Python desktop GUIs, with a live preview, code examples and its API.

Source: https://albakore.github.io/pyzed/library/icon/

:::tip[In plain words]
Small pictures (a folder, a bell, a gear) from a library of more than 1,500.
:::

`pz.icon(name)` draws one of the 1,500+ [Lucide](https://lucide.dev) icons; `color` defaults to the surrounding text color. `pz.svg(source)` draws any SVG from a path or bytes, tinted with `color` if you want.

`pz.icon` · Category: [Content](https://albakore.github.io/pyzed/library/#content) · [Full reference →](https://albakore.github.io/pyzed/reference/widgets/#icon)

**Code:**

```python
pz.row([
    pz.icon("sparkles", size=28, color="#e5c07b"),
    pz.icon("git-branch", size=28, color="#a1c181"),
    pz.icon("folder-open", size=28, color="#74ade8"),
    pz.icon("bug", size=28, color="#d07277"),
    pz.icon("terminal", size=28, color="#c678dd"),
    pz.svg("logo.svg", width=40, height=40),
], spacing=20, align="center")
```

## When to use

- Inside buttons, list rows and headers. Run `pyzed icons` to search the names.

## Usage

```python
import pyzed as pz

pz.row([
    pz.icon("sparkles", size=28, color="#e5c07b"),
    pz.icon("git-branch", size=28, color="#a1c181"),
    pz.icon("folder-open", size=28, color="#74ade8"),
    pz.icon("bug", size=28, color="#d07277"),
    pz.icon("terminal", size=28, color="#c678dd"),
    pz.svg("logo.svg", width=40, height=40),
], spacing=20, align="center")
```

## Variants

:::note[About these captures]
Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site's theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open **Code** under a capture to see the snippet that draws it; free names such as `on_save` stand for your own callbacks.
:::

### Size

```python
pz.icon("sparkles", size=12)
```

```python
pz.icon("sparkles", size=16)
```

```python
pz.icon("sparkles", size=24)
```

```python
pz.icon("sparkles", size=40)
```

### Color

```python
pz.icon("git-branch", size=24, color="#a1c181")
```

```python
pz.icon("bug", size=24, color="#d07277")
```

```python
pz.icon("folder-open", size=24, color="#74ade8")
```

### SVG

`color` paints every visible pixel of the SVG in one color and keeps the transparent ones, like an icon tint. An SVG with a filled background, such as `logo.svg`, becomes a plain tile.

```python
pz.svg("logo.svg", width=48, height=48)
```

```python
shapes = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">'
          '<circle cx="7" cy="7" r="5"/><rect x="12" y="12" width="10" height="10" rx="2"/></svg>')
pz.svg(shapes, width=48, height=48, color="#e5c07b")
```

## Events

Icon has no events of its own: it shows what you give it. Like every widget it also has the **18 common events** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), attached with `.on(...)`: see [Events](https://albakore.github.io/pyzed/guides/events/) and [Events of every component](https://albakore.github.io/pyzed/library/events/).

## Properties and API

### `pz.icon`

```python
icon(name, *, size=16, color=None)
```

A [Lucide](https://lucide.dev) icon. `color` defaults to the surrounding text color.

| Property | Default | Description |
| --- | --- | --- |
| `name` | *required* | Icon name (`pyzed icons` lists them). |
| `size` | `16` | Size in pixels. |
| `color` | `None` | Color. |

[Full reference →](https://albakore.github.io/pyzed/reference/widgets/#icon)

### `pz.svg`

```python
svg(
    source,
    *,
    width=None,
    height=None,
    color=None,
    content_fit=None,
    opacity=1.0,
    rotation=0.0,
)
```

An SVG image.

| Property | Default | Description |
| --- | --- | --- |
| `source` | *required* | Path to an `.svg`, the SVG code as a string (starting with `<`) or `bytes`. |
| `width` | `None` | Width: pixels, `"fill"`, `"shrink"` or `"fill:N"` (proportion). |
| `height` | `None` | Height: pixels, `"fill"`, `"shrink"` or `"fill:N"` (proportion). |
| `color` | `None` | If given, tints the whole SVG with that color (useful for monochrome icons). |
| `content_fit` | `None` | `"contain"`, `"cover"`, `"fill"`, `"none"` or `"scale-down"`. |
| `opacity` | `1.0` | Opacity from 0 to 1. |
| `rotation` | `0.0` | Rotation in degrees. |

[Full reference →](https://albakore.github.io/pyzed/reference/widgets/#svg)

## Related

- [Icon button](https://albakore.github.io/pyzed/library/icon-button/): A square button with just an icon and an optional tooltip.
- [Image](https://albakore.github.io/pyzed/library/image/): Bitmaps with fit, opacity, radius; a pan-and-zoom viewer.