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

# Affinity Photo

Affinity Photo is a professional photo editing app by Serif for retouching, compositing and raw development, now part of the free, all-in-one Affinity app by Canva.

## At a glance

- **Page**: https://devicons.io/icons/affinity-photo/
- **Website**: https://www.affinity.studio/
- **Also known as**: Affinity Photo 2, Serif Affinity Photo
- **Tags**: [Design](/icons/tag/design/), [Photo Editing](/icons/tag/photo-editing/), [Graphics](/icons/tag/graphics/), [Image Editing](/icons/tag/image-editing/)
- **Version added**: 1.3.0

## 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 |
| --- | --- | --- | --- | --- |
| `affinity-photo` | `AffinityPhoto` | https://devicons.io/devicons/icons/affinity-photo.svg | https://devicons.io/devicons/font/affinity-photo.svg | `devicons devicons-affinity-photo` |

## Install and use

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

### React

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

<AffinityPhoto size={32} alt="Affinity Photo logo" />
```

### Vue

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

<template>
  <AffinityPhoto :size="32" alt="Affinity Photo logo" />
</template>
```

### Svelte

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

<AffinityPhoto size={32} alt="Affinity Photo logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/affinity-photo.svg" alt="Affinity Photo logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-affinity-photo"></i>
```

## About the Affinity Photo logo

The Affinity Photo icon is a dark purple rounded square (#4E3188) with a geometric triangular mark made of overlapping pink and magenta facets (#F9A6FF to #EA73FF). It is the version 2 icon, which shares its faceted triangle with Affinity Designer and Affinity Publisher in different colours.

Canva acquired Serif in 2024. In October 2025 it merged Photo, Designer and Publisher into a single free Affinity app.

The icon reads well on light and dark backgrounds.

## When to use this logo

Use Affinity Photo in photo editing software comparisons, Photoshop alternative roundups, creative workflow diagrams and .afphoto file-type icons. It pairs naturally with Adobe Photoshop, GIMP, Canva, Adobe Illustrator and Figma.

## Related icons

- [Adobe Photoshop](/icons/adobe-photoshop.md)
- [GIMP](/icons/gimp.md)
- [Adobe Animate](/icons/adobe-animate.md)
- [Adobe Illustrator](/icons/adobe-illustrator.md)
- [Canva](/icons/canva.md)
- [Svgator](/icons/svgator.md)
- [Figma](/icons/figma.md)
- [Chart.js](/icons/chart-js.md)

## Browse the catalog
- Previous: [Aerospike](/icons/aerospike.md)
- Next: [Aha!](/icons/aha.md)
- [All icons](/icons.md)