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

# Asana

Asana is a work management platform for planning projects, tracking tasks and automating team workflows, with portfolios, goals, AI Studio and a REST API.

## At a glance

- **Page**: https://devicons.io/icons/asana/
- **Website**: https://asana.com/
- **Also known as**: Asana Work Management, Asana AI Studio, Asana API
- **Tags**: [Project Management](/icons/tag/project-management/), [Productivity](/icons/tag/productivity/), [Collaboration](/icons/tag/collaboration/), [SaaS](/icons/tag/saas/)
- **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 |
| --- | --- | --- | --- | --- |
| `asana-icon` | `AsanaIcon` | https://devicons.io/devicons/icons/asana-icon.svg | https://devicons.io/devicons/font/asana-icon.svg | `devicons devicons-asana-icon` |
| `asana` | `Asana` | https://devicons.io/devicons/icons/asana.svg | https://devicons.io/devicons/font/asana.svg | `devicons devicons-asana` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/asana-icon.svg" alt="Asana logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-asana-icon"></i>
```

## About the Asana logo

The Asana icon is three coral (#F06A6A) dots arranged in a triangle, one on top and two below. The lockup adds "asana" in a lowercase sans serif in near-black (#0D0E10).

The coral dots read well on light and dark backgrounds. The dark wordmark disappears on dark surfaces, so use the icon or the monochrome lockup there.

## When to use this logo

Use Asana in project management tool comparisons, team productivity stacks, workflow automation diagrams and docs for Asana integrations or the Asana API. It pairs naturally with Jira, Trello, Notion, Slack and Linear.

## Related icons

- [Notion](/icons/notion.md)
- [Freedcamp](/icons/freedcamp.md)
- [Monday](/icons/monday.md)
- [Planless](/icons/planless.md)
- [Taskade](/icons/taskade.md)
- [Teamwork](/icons/teamwork.md)
- [Trello](/icons/trello.md)
- [Workboard](/icons/workboard.md)

## Browse the catalog
- Previous: [Arm](/icons/arm.md)
- Next: [Asciidoctor](/icons/asciidoctor.md)
- [All icons](/icons.md)