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

# Google Gemma

Google Gemma is a family of lightweight open large language models from Google DeepMind, built from the same research and technology as Gemini.

## At a glance

- **Page**: https://devicons.io/icons/google-gemma/
- **Website**: https://deepmind.google/models/gemma/
- **License**: https://ai.google.dev/gemma/terms
- **Brand guidelines**: https://www.google.com/permissions/logos-trademarks/
- **Also known as**: Gemma, Gemma 4, Gemma 3, PaliGemma, MedGemma
- **Tags**: [AI](/icons/tag/ai/), [LLM](/icons/tag/llm/), [Google](/icons/tag/google/), [Machine Learning](/icons/tag/machine-learning/)
- **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-gemma-icon` | `GoogleGemmaIcon` | https://devicons.io/devicons/icons/google-gemma-icon.svg | https://devicons.io/devicons/font/google-gemma-icon.svg | `devicons devicons-google-gemma-icon` |
| `google-gemma` | `GoogleGemma` | https://devicons.io/devicons/icons/google-gemma.svg | https://devicons.io/devicons/font/google-gemma.svg | `devicons devicons-google-gemma` |

## Install and use

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

### React

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

<GoogleGemmaIcon size={32} alt="Google Gemma logo" />
```

### Vue

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

<template>
  <GoogleGemmaIcon :size="32" alt="Google Gemma logo" />
</template>
```

### Svelte

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

<GoogleGemmaIcon size={32} alt="Google Gemma logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Google Gemma logo

The Gemma mark is a four-pointed star drawn as an outline, set inside a circle and a grid of thin construction lines, as shown on Google's Gemma developer pages. It is filled with a blue gradient that runs from deep blue (#446EFF) through bright blue (#2E96FF) to pale periwinkle (#B1C5FF). Google DeepMind released the first Gemma models in February 2024, followed by Gemma 2, Gemma 3 and the open-weights Gemma 4 in April 2026.

The blue mark works on light and dark backgrounds, but its thin lines get faint at small sizes. The dark "Gemma" wordmark does not show on dark surfaces, so use the monochrome lockup there.

## When to use this logo

Use Gemma in open-weight model comparison tables, local inference guides, and fine-tuning tutorials. It also fits model cards and provider pickers in tools such as Ollama, LM Studio and Hugging Face. At very small sizes, check that the thin construction lines still read. It pairs naturally with Llama, Mistral, Qwen and DeepSeek, and with Google Gemini and Google DeepMind for provenance.

## Related icons

- [Google PaLM](/icons/google-palm.md)
- [Google Gemini](/icons/google-gemini.md)
- [Gemini Notebook](/icons/google-notebooklm.md)
- [Google AI Studio](/icons/google-ai-studio.md)
- [Google Bard](/icons/google-bard.md)
- [Google Colab](/icons/google-colab.md)
- [Google DeepMind](/icons/google-deepmind.md)
- [Google Vertex AI](/icons/google-vertex-ai.md)

## Browse the catalog
- Previous: [Google Gemini](/icons/google-gemini.md)
- Next: [Google Gmail](/icons/google-gmail.md)
- [All icons](/icons.md)