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

# Lovart

Lovart is an AI design agent that turns a conversation into logos, social media graphics, packaging, video ads and complete marketing campaign designs.

## At a glance

- **Page**: https://devicons.io/icons/lovart/
- **Website**: https://www.lovart.ai/
- **License**: https://www.lovart.ai/statement/terms-of-use
- **Also known as**: Lovart AI, Lovart.ai
- **Tags**: [AI](/icons/tag/ai/), [Design](/icons/tag/design/), [Agents](/icons/tag/agents/), [Image Generation](/icons/tag/image-generation/)
- **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 |
| --- | --- | --- | --- | --- |
| `lovart-icon` | `LovartIcon` | https://devicons.io/devicons/icons/lovart-icon.svg | https://devicons.io/devicons/font/lovart-icon.svg | `devicons devicons-lovart-icon` |
| `lovart` | `Lovart` | https://devicons.io/devicons/icons/lovart.svg | https://devicons.io/devicons/font/lovart.svg | `devicons devicons-lovart` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Lovart logo

The Lovart mark is a solid circle with three cut-out shapes: a short dash, an "L" and a small ring, so it reads as a playful "-Lo". The full logo pairs the circle with a rounded, geometric "Lovart" wordmark. Both files come from the logo in the header of lovart.ai.

The logo is a single near-black color (#100F09) and has no accent color. It disappears on dark backgrounds, so use the monochrome version in dark themes.

## When to use this logo

Use the Lovart logo in AI design tool comparisons, creative agent roundups, marketing and brand-design workflow diagrams, and lists of generative design apps. The circular mark suits compact spots such as app grids, avatars and provider pickers, while the full logo fits landing pages, partner sections and tool directories. It pairs naturally with Canva, Figma, Midjourney, Krea and Ideogram.

## Related icons

- [Adobe Firefly](/icons/adobe-firefly.md)
- [Ideogram](/icons/ideogram.md)
- [Krea](/icons/krea.md)
- [Luma](/icons/luma.md)
- [Midjourney](/icons/midjourney.md)
- [Claude Code](/icons/claude-code.md)
- [LangChain](/icons/langchain.md)
- [Amazon Nova](/icons/amazon-nova.md)

## Browse the catalog
- Previous: [Lovable](/icons/lovable.md)
- Next: [Lua](/icons/lua.md)
- [All icons](/icons.md)