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

# Canva

Canva is an online design platform for making social media graphics, presentations, documents, videos and print designs from templates, with built-in AI tools.

## At a glance

- **Page**: https://devicons.io/icons/canva/
- **Website**: https://www.canva.com/
- **Also known as**: Canva Pro, Canva Design, Canva Apps SDK, Canva Connect API
- **Tags**: [Design](/icons/tag/design/), [Graphics](/icons/tag/graphics/), [Presentations](/icons/tag/presentations/), [Productivity](/icons/tag/productivity/), [SaaS](/icons/tag/saas/)
- **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 |
| --- | --- | --- | --- | --- |
| `canva` | `Canva` | https://devicons.io/devicons/icons/canva.svg | https://devicons.io/devicons/font/canva.svg | `devicons devicons-canva` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Canva logo

The Canva icon is a circle filled with a diagonal gradient from teal (#00C4CC) to violet (#7D2AE7), with a white script "C" in the middle. The cursive letter comes from the Canva wordmark, and the gradient circle is the mark Canva uses for its app icon and favicon.

The gradient circle reads well on light and dark backgrounds.

## When to use this logo

Use Canva in design tool comparisons, marketing stack diagrams, social media workflow guides and docs for the Canva Apps SDK or Connect APIs. It also fits "edit in Canva" buttons and template marketplaces. It pairs naturally with Figma, Adobe Express, Photoshop, Google Slides and PowerPoint.

## Related icons

- [Adobe](/icons/adobe.md)
- [Adobe Animate](/icons/adobe-animate.md)
- [Adobe Illustrator](/icons/adobe-illustrator.md)
- [Adobe Photoshop](/icons/adobe-photoshop.md)
- [Affinity Photo](/icons/affinity-photo.md)
- [Asana](/icons/asana.md)
- [Calendly](/icons/calendly.md)
- [Dropmark](/icons/dropmark.md)

## Browse the catalog
- Previous: [Canjs](/icons/canjs.md)
- Next: [Capacitor](/icons/capacitorjs.md)
- [All icons](/icons.md)