This document outlines how to use the Google Classroom name, logo and icon. If
you have any additional questions, refer to the more general
[Google brand permissions](https://www.google.com/permissions/).

## Icon use guidelines

When you are integrating with Classroom, always use the
Classroom icon instead of the Google logo. Make sure the
Google Classroom icon is fully and clearly visible. You can use the icon with
or without the accompanying text "Google Classroom". If you are using the
Classroom icon along with other logos, make sure each has proper
spacing for readability.

### Size guidelines

The Classroom icon is available in a number of different sizes,
from 32 to 96 pixels. You can scale the icon for different devices and screen
sizes but must preserve the aspect ratio so the logo isn't stretched.

#### Square Logo

![Square Classroom logos](https://developers.google.com/static/workspace/classroom/images/branding/cube_examples.png)

[Download square logos](https://developers.google.com/static/workspace/classroom/assets/classroom_square_logo.zip)

#### Round Logo

![Round Classroom logos](https://developers.google.com/static/workspace/classroom/images/branding/sphere_examples.png)

[Download round logos](https://developers.google.com/static/workspace/classroom/assets/classroom_circle_logo.zip)

### Describe the Classroom icon

When using the Classroom icon, you can include either the full
name "Google Classroom" or the short version "Classroom".

Example buttons:

![Button examples](https://developers.google.com/static/workspace/classroom/images/branding/button_examples.png)

Example padding:

![Padding example](https://developers.google.com/static/workspace/classroom/images/branding/button_examples_guide.png)

When talking about Classroom classes, use one of these phrases
(note that "classes" is not capitalized):

- Google Classroom classes (example: "Choose from your Google Classroom classes")
- Classroom classes (example: "Choose from your Classroom classes")
- Invite using Google Classroom
- Share with Google Classroom
- Share to Google Classroom

Don't use the following phrases:

- Google Classrooms
- Google classes
- Google Classes
- Google Class
- Invite Google Classroom

### Describe your own product's compatibility with Classroom

If your product is compatible with Google Classroom, make reference to Google
Classroom by using the text "for", "for use with", or "compatible
with", and be sure to include the ™ symbol with the Google trademark.
Example: "for Google Classroom™"

![Example of logo](https://developers.google.com/static/workspace/classroom/images/branding/logo_example.png)

If you are making reference to a Google trademark in combination with your logo,
the referencing text should be smaller in size than your logo.

![Example of logo](https://developers.google.com/static/workspace/classroom/images/branding/logo_example_2.png)

> [!NOTE]
> **Note:** Don't use Google trademarks or a modified version of a Google trademark as the logo for your application without written permission from Google.

### Screenshot usage

For illustrative or informative purposes, you may use standard, unaltered
screenshots of Google services. For further details, check out the general
[Google Brand Permissions](https://www.google.com/permissions/).

### Provide proper attribution

Provide proper attribution to Google for any use of their marks in your
application title or in your description. Example: Google Classroom is a
trademark of Google Inc. Use of this trademark is subject to
[Google Brand Permissions](https://www.google.com/permissions/).

### Font

Use Roboto Bold, a TrueType font.

To install,
[download Roboto font](https://www.google.com/design/spec/style/typography.html)
and extract the download bundle.

- On Mac, double-click Roboto-Bold.ttf, then click "Install Font".
- On Windows, drag the file to "My Computer" \> "Windows" \> "Fonts" folder.

### Colors

![Example of colors and icons](https://developers.google.com/static/workspace/classroom/images/branding/brand_color_explanation.png)

- Classic icon
  - The green color of the Google Classroom icon is #25A667.
  - The yellow color of the Google Classroom icon is #F6BB18.
  - The white color of the Google Classroom icon is #FFFFFF.
  - The green secondary color of the left and right person in Google Classroom icon is #57BB8A.
- Dark icon
  - The black color of the Google Classroom icon is #000000.
  - The white color of the Google Classroom icon is #FFFFFF.
  - The grey secondary color of the left and right person in Google Classroom icon is #57BB8A.
- Light icon
  - The green color of the Google Classroom icon is #25A667.
  - The yellow color of the Google Classroom icon is #F6BB18.
  - The green secondary color of the left and right person in Google Classroom icon is #57BB8A.

### Hover state

When holding the pointer over the icon, it should be shaded with 20% black.

![Example of hover states](https://developers.google.com/static/workspace/classroom/images/branding/hover_states.png)

### Incorrect logo design

- Don't use colors other than the two specified for the icon.
- Don't use a Google icon to represent Google Classroom.
- Don't create your own icon for the button.
- Don't use the term "Google" by itself in the button without a Google Classroom icon.
- Examples of incorrect Google Classroom button designs:

![Incorrect usage examples](https://developers.google.com/static/workspace/classroom/images/branding/incorrect_usage.png)

Never use the colored Google logo in the button. Always include the Google
Classroom icon on the left of the button. Don't change the font
of the button.