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

# Google Colab

Google Colab is a hosted Jupyter Notebook service from Google that runs Python in the browser with free access to GPUs and TPUs for machine learning.

## At a glance

- **Page**: https://devicons.io/icons/google-colab/
- **Website**: https://colab.research.google.com/
- **License**: https://policies.google.com/terms
- **Brand guidelines**: https://www.google.com/permissions/logos-trademarks/
- **Also known as**: Colab, Colaboratory, Google Colaboratory
- **Tags**: [Google](/icons/tag/google/), [Machine Learning](/icons/tag/machine-learning/), [Developer Tools](/icons/tag/developer-tools/), [Cloud](/icons/tag/cloud/), [AI](/icons/tag/ai/)
- **Version added**: 1.2.0

## 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-colab-icon` | `GoogleColabIcon` | https://devicons.io/devicons/icons/google-colab-icon.svg | https://devicons.io/devicons/font/google-colab-icon.svg | `devicons devicons-google-colab-icon` |
| `google-colab` | `GoogleColab` | https://devicons.io/devicons/icons/google-colab.svg | https://devicons.io/devicons/font/google-colab.svg | `devicons devicons-google-colab` |

## Install and use

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

### React

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

<GoogleColabIcon size={32} alt="Google Colab logo" />
```

### Vue

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

<template>
  <GoogleColabIcon :size="32" alt="Google Colab logo" />
</template>
```

### Svelte

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

<GoogleColabIcon size={32} alt="Google Colab logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Google Colab logo

The Colab mark is a pair of interlocking rings that spell "CO", short for Colaboratory. Each ring is split into segments of Google yellow (#F9AB00) and orange (#E8710A). The full logo, used as the site logo on Google's Colab developer pages, writes "colab" in lowercase: the "co" is the ring mark and "lab" is set in the same yellow.

Both colors are bright enough to read on light and dark backgrounds, so the color version works on either. Use the monochrome version when the segment colors would clash with the layout.

## When to use this logo

Use Google Colab in data science and machine learning tutorials, "Open in Colab" style links in docs and READMEs, and notebook environment comparisons. It also fits course material and workshop slides that run code in the browser. Use the "CO" mark alone for badges, favicons and small buttons. It pairs naturally with Jupyter, Kaggle, Python, PyTorch, TensorFlow and Google Cloud.

## Related icons

- [Google Vertex AI](/icons/google-vertex-ai.md)
- [Google AI Studio](/icons/google-ai-studio.md)
- [Google DeepMind](/icons/google-deepmind.md)
- [Google Gemma](/icons/google-gemma.md)
- [Google PaLM](/icons/google-palm.md)
- [Google Photos](/icons/google-photos.md)
- [Google Gemini](/icons/google-gemini.md)
- [Gemini Notebook](/icons/google-notebooklm.md)

## Browse the catalog
- Previous: [Google Cloud Run](/icons/google-cloud-run.md)
- Next: [Google Data Studio](/icons/google-data-studio.md)
- [All icons](/icons.md)