[Home](/index.md) › [Icons](/icons.md) › Google AI Studio

# Google AI Studio

Google AI Studio is Google's browser-based tool for prototyping with Gemini models, testing prompts and getting a Gemini API key to build AI apps.

## At a glance

- **Page**: https://devicons.io/icons/google-ai-studio/
- **Website**: https://aistudio.google.com/
- **License**: https://ai.google.dev/gemini-api/terms
- **Brand guidelines**: https://www.google.com/permissions/logos-trademarks/
- **Also known as**: AI Studio, Google AIStudio, aistudio.google.com
- **Tags**: [AI](/icons/tag/ai/), [LLM](/icons/tag/llm/), [Google](/icons/tag/google/), [Developer Tools](/icons/tag/developer-tools/), [API](/icons/tag/api/)
- **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 |
| --- | --- | --- | --- | --- |
| `google-ai-studio-icon` | `GoogleAiStudioIcon` | https://devicons.io/devicons/icons/google-ai-studio-icon.svg | https://devicons.io/devicons/font/google-ai-studio-icon.svg | `devicons devicons-google-ai-studio-icon` |
| `google-ai-studio` | `GoogleAiStudio` | https://devicons.io/devicons/icons/google-ai-studio.svg | https://devicons.io/devicons/font/google-ai-studio.svg | `devicons devicons-google-ai-studio` |

## Install and use

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

### React

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

<GoogleAiStudioIcon size={32} alt="Google AI Studio logo" />
```

### Vue

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

<template>
  <GoogleAiStudioIcon :size="32" alt="Google AI Studio logo" />
</template>
```

### Svelte

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

<GoogleAiStudioIcon size={32} alt="Google AI Studio logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/google-ai-studio-icon.svg" alt="Google AI Studio logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-google-ai-studio-icon"></i>
```

## About the Google AI Studio logo

The current Google AI Studio icon is two slanted, rounded bars stacked into an "S"-like shape. Soft gradients run across them in Google's colors: green (#00B95C) into blue (#3186FF) on the upper bar, and blue into yellow and red (#FC413D) on the lower bar.

The icon reads well on light and dark backgrounds. The lockup pairs it with a "Google AI Studio" wordmark in dark grey (#212226), which fades on dark surfaces, so use the monochrome lockup there.

## When to use this logo

Use Google AI Studio in LLM provider pickers, Gemini API quickstarts and SDK setup guides, and prompt-engineering tutorials. It also fits AI developer tool comparisons and architecture diagrams that show where API keys come from. Use the standalone icon for favicons, avatars and small UI slots. It pairs naturally with Google Gemini, Google Vertex AI, Gemma, the OpenAI Platform and Anthropic Console.

## Related icons

- [Google Gemini](/icons/google-gemini.md)
- [Gemini Notebook](/icons/google-notebooklm.md)
- [Google Bard](/icons/google-bard.md)
- [Google Colab](/icons/google-colab.md)
- [Google Developers](/icons/google-developers.md)
- [Google Gemma](/icons/google-gemma.md)
- [Google PaLM](/icons/google-palm.md)
- [Google DeepMind](/icons/google-deepmind.md)

## Browse the catalog
- Previous: [Google AdSense](/icons/google-adsense.md)
- Next: [Google Analytics](/icons/google-analytics.md)
- [All icons](/icons.md)