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

# Google Classroom

Google Classroom is Google's learning platform for teachers to create classes, share assignments, grade work and talk with students, part of Google Workspace for Education.

## At a glance

- **Page**: https://devicons.io/icons/google-classroom/
- **Website**: https://edu.google.com/workspace-for-education/products/classroom/
- **License**: https://policies.google.com/terms
- **Brand guidelines**: https://www.google.com/permissions/logos-trademarks/
- **Also known as**: Classroom, Google Classroom API, Google Workspace for Education
- **Tags**: [Google](/icons/tag/google/), [Education](/icons/tag/education/), [Online Learning](/icons/tag/online-learning/), [Collaboration](/icons/tag/collaboration/)
- **Version added**: 1.3.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-classroom` | `GoogleClassroom` | https://devicons.io/devicons/icons/google-classroom.svg | https://devicons.io/devicons/font/google-classroom.svg | `devicons devicons-google-classroom` |

## Install and use

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

### React

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

<GoogleClassroom size={32} alt="Google Classroom logo" />
```

### Vue

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

<template>
  <GoogleClassroom :size="32" alt="Google Classroom logo" />
</template>
```

### Svelte

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

<GoogleClassroom size={32} alt="Google Classroom logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Google Classroom logo

The Google Classroom icon is a green chalkboard (#0F9D58) in a yellow frame (#F4B400). Three figures sit in the middle, a white one in front and two light green ones (#57BB8A) behind, and a short white line in the bottom-right corner looks like chalk on the board's ledge.

The icon reads well on light and dark backgrounds.

## When to use this logo

Use Google Classroom in edtech tool comparisons, LMS integration docs, school IT setup guides and docs for the Google Classroom API. It pairs naturally with Google Meet, Google Drive, Google Slides, Moodle and Microsoft Teams.

## Related icons

- [Google Drive](/icons/google-drive.md)
- [Google Meet](/icons/google-meet.md)
- [Google Sheets](/icons/google-sheets.md)
- [Google Slides](/icons/google-slides.md)
- [Google Workspace](/icons/google-workspace.md)
- [Google Gemini](/icons/google-gemini.md)
- [Google Data Studio](/icons/google-data-studio.md)
- [Gemini Notebook](/icons/google-notebooklm.md)

## Browse the catalog
- Previous: [Google Calendar](/icons/google-calendar.md)
- Next: [Google Cloud](/icons/google-cloud.md)
- [All icons](/icons.md)