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

# Adobe Firefly

Adobe Firefly is Adobe's generative AI app and model family for text-to-image, text-to-video and audio generation, part of Adobe Creative Cloud.

## At a glance

- **Page**: https://devicons.io/icons/adobe-firefly/
- **Website**: https://firefly.adobe.com/
- **License**: https://www.adobe.com/legal/permissions/trademarks.html
- **Also known as**: Firefly, Adobe Firefly Image, Adobe Firefly Video
- **Tags**: [AI](/icons/tag/ai/), [Image Generation](/icons/tag/image-generation/), [Video](/icons/tag/video/), [Design](/icons/tag/design/)
- **Version added**: 1.2.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 |
| --- | --- | --- | --- | --- |
| `adobe-firefly-icon` | `AdobeFireflyIcon` | https://devicons.io/devicons/icons/adobe-firefly-icon.svg | https://devicons.io/devicons/font/adobe-firefly-icon.svg | `devicons devicons-adobe-firefly-icon` |
| `adobe-firefly` | `AdobeFirefly` | https://devicons.io/devicons/icons/adobe-firefly.svg | https://devicons.io/devicons/font/adobe-firefly.svg | `devicons devicons-adobe-firefly` |

## Install and use

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

### React

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

<AdobeFireflyIcon size={32} alt="Adobe Firefly logo" />
```

### Vue

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

<template>
  <AdobeFireflyIcon :size="32" alt="Adobe Firefly logo" />
</template>
```

### Svelte

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

<AdobeFireflyIcon size={32} alt="Adobe Firefly logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Adobe Firefly logo

The Firefly icon is a red rounded square (#EB1000) with the white letters "Fi" and a small four-pointed sparkle above the "i". It follows the Adobe app icon system, where each product gets a two-letter mnemonic on a colored tile. This is the icon that firefly.adobe.com uses. The lockup pairs it with an "Adobe Firefly" wordmark in black.

The red tile reads well on both light and dark backgrounds. The black wordmark disappears on dark surfaces, so use the monochrome lockup there.

## When to use this logo

Use Adobe Firefly in AI image and video generator comparisons, creative workflow diagrams, and docs for Creative Cloud or Firefly API integrations. It also fits model pickers in creative apps and slides about generative fill or AI video in production work. Use the standalone icon in app grids and small UI slots. It pairs naturally with Adobe, Photoshop, Midjourney, DALL-E, Runway and Google Veo.

## Related icons

- [Adobe](/icons/adobe.md)
- [Krea](/icons/krea.md)
- [ComfyUI](/icons/comfyui.md)
- [DeepAI](/icons/deepai.md)
- [Hailuo AI](/icons/hailuo.md)
- [Ideogram](/icons/ideogram.md)
- [Kling AI](/icons/kling.md)
- [Lovart](/icons/lovart.md)

## Browse the catalog
- Previous: [Adobe](/icons/adobe.md)
- Next: [AdonisJS](/icons/adonisjs.md)
- [All icons](/icons.md)