Google Classroom Branding Guidelines

This document outlines how to use the Google Classroom name, logo and icon. If you have any additional questions, please refer to the more general Google brand permissions.

Icon use guidelines

When you are integrating with Classroom, always use the Classroom icon (as opposed to 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.

Sizes

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 Classroom logos

Download square logos

Round Classroom logos

Download round logos

Describing Classroom

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

Example buttons:

Button examples

Example padding:

Padding example

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 via Google Classroom
  • Share with Google Classroom
  • Share to Google Classroom

Do not use the following phrases:

  • Google Classrooms
  • Google classes
  • Google Classes
  • Google Class
  • Invite Google Classroom

Describing your own product or application

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

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

Using screenshots

For illustrative or informative purposes, you may use standard, unaltered screenshots of Google services. For further details, check out the general Google Brand Permissions.

Giving proper attribution

Do give 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.

Font

Use Roboto Bold, a TrueType font.

To install, download Roboto font and unzip 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

  • 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 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 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 left and right person in Google Classroom icon is #57BB8A

Hover state

On hover the icon should be shaded with 20% black.

Example of hover states

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

Never use the colored Google logo in the button. Always include the Google Classroom icon on the left of the button. Do not change the font of the button.

发送以下问题的反馈:

此网页
Classroom API
Classroom API