Google+ branding guidelines

These guidelines provide you with the design specification for various Google+ buttons and badges. You should use Google+ Sign-In branding when your app uses one or more of the social scopes listed below. If your app does not employ any social scopes, then you should use the standard Google Sign-In button.

You can use these assets on your app (website or mobile app) without pre-approval provided you follow these basic guidelines. Use of Google brands in ways not expressly covered by this document is not allowed without prior written consent from Google (see the Guidelines for Third Party Use of Google Brand Features for more information). Button use must also be in line with our Buttons Policy.

Google+ Sign-In button branding guidelines

Sign-In buttons are available in two color styles (red background and white background) and four sizes, as shown below.

The Google+ Sign-In button consists of two parts—the Google+ icon on the left, and the button text. The Google+ icon must appear on all sign-in buttons.

Red Button White Button Image Files
Includes Google+ Sign-In buttons and Google+ icons in PNG, SVG, EPS, and Sketch formats, in many resolutions. Includes base, hover and press states.

Sketch files are included in the download so you can translate the "Sign in with" or "Sign in" text. These files require Roboto font

Google+ Sign-In and other third party sign-in options

Equal prominence

The Google+ Sign-In button must be displayed at least as prominently as other third party sign-in options. For example, buttons should be approximately the same size and have similar visual weight.

Matching your own app's style:

You may create a custom Google+ Sign-In button to match your app's style. For example, you can customize it using a style similar to other sign-in buttons with:

  • Same color of visual treatment
  • Same font
  • Same shape and size
  • Similar button text

For more information, see the developer policies for other requirements related to branding and buttons.

Custom button design specifications

Some of this information is useful if you need to adapt the button to your app design or translate the text "Sign in with" or "Sign in", which can widen or narrow the button. You must follow these guidelines, except as noted above in Matching your own app's style.


You can scale the button as needed for different devices and screen sizes, but you must preserve the aspect ratio so that the Google+ icon is not stretched.


To encourage users to click the button, we recommend the call-to-action text "Sign in with Google" or "Sign up with Google". It should be clear to the user that they are signing into your app or signing up for your app with their Google credentials, not signing up or registering for a Google account on your app.

"Google" Text

Do not use the word "Google+" on your button, use the word "Google" instead. You can use the word "Google" by itself in the button if it is accompanied by adjacent text that makes it clear what the action is. For example:

Sign in with:


You should use the Google+ Sign-In button in its provided color schemes. The color for an unpressed red button is #DC4E41. The color for an unpressed white button is #FFFFFF. Do not make the button other colors, except as noted for situations with Matching your own app's style.


The button font is Roboto Medium, a TrueType font. To install, first download the Roboto font and unzip the download bundle. On Mac, just double-click Roboto-Medium.ttf, then click "Install Font". On Windows, drag the file to "My Computer" > "Windows" > "Fonts" folder. Do not use other fonts on the button, except as noted for situations with Matching your own app's style.

For websites that use a custom sign-in button, you can load the Roboto font from Google Fonts.


The padding to the left (and right) of the text should be about half the width of the Google+ icon.

Illustrates the
      dimensions of the elements of a button including padding around text.

Google+ icon in the "Sign in with Google" button

Regardless of the text, you must not change the icon on the left side of the button, other than to re-size it; the Google+ icon must be part of the button. If you need to create your own custom size Google+ icon, start with any of the icon sizes included in the download bundle.

Incorrect button design

Except as noted above for situations with Matching your own app's style:

  • Do not use the Google+ icon by itself without the button boundary and without text to indicate the user action.
  • Do not use a color other than the two versions specified for the button.
  • Do not use a Google icon to represent Google+ Sign-In.
  • Do not use an old Google+ icon.
  • Do not create your own icon for the button.
  • Do not use the term "Google" by itself in the button without an accompanied Google+ icon.

Examples of incorrect Google+ Sign-In button designs:

Incorrect use of colored Google+ icon
Never use the colored Google logo in the button. Always include the Google+ icon on the left of the button.
Incorrect use of font and Google icon
Do not change the font of the button except as noted; do not use the Google icon.
Incorrect use of Google icon Incorrect use of Google icon

Do not use any Google icons other than the versions shown above to represent Sign-In.

Google+ interactive post branding guidelines

When creating a call-to-action button for an interactive post on your app, it should be consistent with your app design and the Google+ branding guidelines. If you use the Google+ icon to invoke an interactive post, it must adhere to our Google+ icon guidelines below, including color scheme, styling, and so forth.

Google+ icon
Google+ icon

Download Google+ icon in various sizes.

Learn how to customize your interactive post button.

Google+ badge, share, and follow button branding guidelines

Adding a Google+ badge to your website, email, or marketing campaign makes it easy for fans to add your page or profile to their circles, or join your community. Similarly, the compact Follow button allows visitors to add your page or profile to their circles directly from your app. The Share button allows visitors to easily share your content with their circles.

We prefer that you use the Google+ badge, Share button, and Follow button in their provided formats.

Google+ icon as a button or badge: In certain situations, you might want to use the Google+ icon to enable users to share content to Google+ or to link to your Google+ page so that users can follow you. You can do this so long as the context makes it clear what action will be taken when the user clicks on the icon. For example:

  • Share this article: Share on Google+
  • Follow us on: Follow us on Google+

In addition, the icon must adhere to the Google+ icon guidelines below, including color scheme, styling, and so forth.

+1 button branding guidelines

You must only use the +1 button in its provided formats. You must not use another image to represent the functionality of a +1 button, use old branding, or create your own +1 button. You must not use the "+1" symbol to represent a share or for any other purpose. The +1 button comes in a variety of sizes to work on any page. You can also include an annotation of the total number of +1's for the page. Depending on width, the +1 button annotation can also display profile pictures and names of others who have +1'd the page. You must never create a custom count of +1s or shares next to your custom button.

Google+ icon branding guidelines

We prefer that you do not change or remake the icon in any way. But, if you display multiple third-party social icons together on your app, you can customize the Google+ icon to match your app's style provided that all buttons are customized using a similar style:

  • Same color and visual treatment.
  • Same shape and size.

You must not change the font of the "g" or the position of the "+" symbol in the icon and the aspect ratio must be preserved. The "g+" must always be centered in the icon.

      example of the Google+ icon
Google+ icon

You can download Google+ icon in various sizes. The red color of the Google+ icon is #dd4b39.

Use of Google brands in ways not covered by this document is not allowed without prior written consent from Google (see the Getting permission to use Google's brand features for more information).

Google+ Sign-In social scopes

Using one or more of the following scopes in your mobile or website app requires the use of Google+ Sign-In branding.*********


Send feedback about...

Google+ Platform
Google+ Platform