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

# Adobe Illustrator

Adobe Illustrator is Adobe's vector graphics editor for logos, icons, illustrations and typography, with Firefly-powered generative tools on desktop and iPad.

## At a glance

- **Page**: https://devicons.io/icons/adobe-illustrator/
- **Website**: https://www.adobe.com/products/illustrator.html
- **License**: https://www.adobe.com/legal/permissions/trademarks.html
- **Also known as**: Illustrator, Adobe Illustrator CC, Illustrator on the iPad, AI file
- **Tags**: [Adobe](/icons/tag/adobe/), [Design](/icons/tag/design/), [Vector Graphics](/icons/tag/vector-graphics/), [Graphics](/icons/tag/graphics/), [Illustration](/icons/tag/illustration/)
- **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 |
| --- | --- | --- | --- | --- |
| `adobe-illustrator` | `AdobeIllustrator` | https://devicons.io/devicons/icons/adobe-illustrator.svg | https://devicons.io/devicons/font/adobe-illustrator.svg | `devicons devicons-adobe-illustrator` |

## Install and use

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

### React

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

<AdobeIllustrator size={32} alt="Adobe Illustrator logo" />
```

### Vue

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

<template>
  <AdobeIllustrator :size="32" alt="Adobe Illustrator logo" />
</template>
```

### Svelte

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

<AdobeIllustrator size={32} alt="Adobe Illustrator logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/adobe-illustrator.svg" alt="Adobe Illustrator logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-adobe-illustrator"></i>
```

## About the Adobe Illustrator logo

The Illustrator icon is a dark brown rounded square (#330000) with the letters "Ai" in orange (#FF9A00). It follows Adobe's app icon system, where each Creative Cloud app gets a two-letter mnemonic on a dark tile in its own colour.

The dark tile blends into very dark backgrounds, but the orange letters stay legible.

## When to use this logo

Use Adobe Illustrator in design tool comparisons, vector workflow guides, .ai and SVG export docs and icon production pipelines. It pairs naturally with Adobe Photoshop, Figma, Inkscape and Canva.

## Related icons

- [Adobe Animate](/icons/adobe-animate.md)
- [Adobe Photoshop](/icons/adobe-photoshop.md)
- [Adobe](/icons/adobe.md)
- [Adobe Acrobat](/icons/adobe-acrobat.md)
- [Adobe After Effects](/icons/adobe-after-effects.md)
- [Adobe Firefly](/icons/adobe-firefly.md)
- [Adobe Premiere Pro](/icons/adobe-premiere-pro.md)
- [Affinity Photo](/icons/affinity-photo.md)

## Browse the catalog
- Previous: [Adobe Firefly](/icons/adobe-firefly.md)
- Next: [Adobe Photoshop](/icons/adobe-photoshop.md)
- [All icons](/icons.md)