[Home](/index.md) › [Icons](/icons.md) › Penpot

# Penpot

Penpot is an open-source design and prototyping platform for product teams that runs in the browser, self-hosts, and uses open standards like SVG, CSS and HTML.

## At a glance

- **Page**: https://devicons.io/icons/penpot/
- **Website**: https://penpot.app/
- **Also known as**: Penpot Design, Penpot.app
- **Tags**: [Design](/icons/tag/design/), [Prototyping](/icons/tag/prototyping/), [Open Source](/icons/tag/open-source/), [UI Design](/icons/tag/ui-design/), [Collaboration](/icons/tag/collaboration/)
- **Version added**: 1.3.0
- **Contrast**: needs a light backdrop on dark backgrounds

## Files

Each file is one variant of this logo. The component name is derived from the file name.

| File | Component | Color SVG | Monochrome SVG | Font class |
| --- | --- | --- | --- | --- |
| `penpot` | `Penpot` | https://devicons.io/devicons/icons/penpot.svg | https://devicons.io/devicons/font/penpot.svg | `devicons devicons-penpot` |

## Install and use

```bash
npm install @dev.icons/react  # or @dev.icons/vue, @dev.icons/svelte
```

### React

```tsx
import { Penpot } from "@dev.icons/react";
// Monochrome (inherits currentColor):
// import { Penpot } from "@dev.icons/react/mono";

<Penpot size={32} alt="Penpot logo" />
```

### Vue

```vue
<script setup>
import { Penpot } from "@dev.icons/vue";
</script>

<template>
  <Penpot :size="32" alt="Penpot logo" />
</template>
```

### Svelte

```svelte
<script>
  import { Penpot } from "@dev.icons/svelte";
</script>

<Penpot size={32} alt="Penpot logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/penpot.svg" alt="Penpot logo" width="48" height="48" />
```

### Icon font

```css
@import "devicons/css"; /* npm install devicons */
```

```html
<i class="devicons devicons-penpot"></i>
```

## About the Penpot logo

The Penpot logo is a black line drawing of a cube-shaped pencil box with the tips of several pencils sticking out of the top. It is a single-colour outline mark, so it sits comfortably next to UI screenshots and wireframes.

The black outline disappears on dark surfaces, so use the monochrome version there.

## When to use this logo

Use Penpot in design tool comparisons, open-source design system docs, self-hosting guides and handoff workflow diagrams. It pairs naturally with Figma, Sketch, Adobe Illustrator, Storybook and Docker.

## Related icons

- [Figma](/icons/figma.md)
- [Precursor](/icons/precursor.md)
- [Github](/icons/github.md)
- [Blender](/icons/blender.md)
- [Brandfolder](/icons/brandfolder.md)
- [Dovetail](/icons/dovetail.md)
- [Dropmark](/icons/dropmark.md)
- [Eraser](/icons/eraser.md)

## Browse the catalog
- Previous: [Peer 5](/icons/peer5.md)
- Next: [Percona](/icons/percona.md)
- [All icons](/icons.md)