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

# Monica

Monica is an all-in-one AI assistant for chat, writing, translation and research, bringing multiple AI models to browser extensions, web, desktop and mobile.

## At a glance

- **Page**: https://devicons.io/icons/monica/
- **Website**: https://monica.im/
- **License**: https://monica.im/terms
- **Also known as**: Monica AI, Monica.im
- **Tags**: [AI](/icons/tag/ai/), [Productivity](/icons/tag/productivity/), [LLM](/icons/tag/llm/), [Translation](/icons/tag/translation/)
- **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 |
| --- | --- | --- | --- | --- |
| `monica-icon` | `MonicaIcon` | https://devicons.io/devicons/icons/monica-icon.svg | https://devicons.io/devicons/font/monica-icon.svg | `devicons devicons-monica-icon` |
| `monica` | `Monica` | https://devicons.io/devicons/icons/monica.svg | https://devicons.io/devicons/font/monica.svg | `devicons devicons-monica` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Monica logo

The Monica mark is a round, friendly face: a thick circular ring around a white oval, with one rounded vertical eye and one winking chevron eye. The full logo pairs it with a clean sans-serif "Monica" wordmark in near-black (#262626). The mark matches the logo on monica.im, and the wordmark comes from the vector logo in the site header.

The ring uses a horizontal gradient from purple (#A83FE0) through blue (#515FFB) to cyan (#2BB5DD). The mark works on both light and dark backgrounds, but the dark wordmark disappears in dark themes. There, use the monochrome version or the mark on its own.

## When to use this logo

Use the Monica logo in AI assistant and browser extension comparisons, productivity tool lists, AI writing and translation tool roundups, and integration docs. It pairs naturally with ChatGPT, Claude, Gemini, Perplexity and Poe, and with other multi-model chat apps. The mark alone suits extension toolbars, sidebar launchers and small app badges, where the full wordmark would not fit.

## Related icons

- [DeepL](/icons/deepl.md)
- [Gemini Notebook](/icons/google-notebooklm.md)
- [Kagi](/icons/kagi.md)
- [Poe](/icons/poe.md)
- [Claude](/icons/claude.md)
- [DeepSeek](/icons/deepseek.md)
- [Google Gemini](/icons/google-gemini.md)
- [LangChain](/icons/langchain.md)

## Browse the catalog
- Previous: [MongoDB](/icons/mongodb.md)
- Next: [Mono](/icons/mono.md)
- [All icons](/icons.md)