DEV Community


Create buttons for 'Signing in with'

richardlikestea profile image Richard Shepherd Updated on ・2 min read

Here at we are releasing our logos into the wild so you can create custom 'Sign in with' buttons on your (undoubtedly excellent) website.

This is a super-quick guide to adding custom buttons to your website.

  1. Head over to the brand resource guidelines page. There you will find all our logo images and our icon images too.

  2. You can copy and paste an example button. Here are a few examples to choose from (feel free to design your own too):

A light button that can be used on most pages:
A very attractive sign in with button wouldn't you say?

<div style="display:inline-block;padding:0.3em;border:1px solid gray;margin:1em;border-radius:4px;">
  <span style="display:flex;align-items:center;">
    <img src="/icon.svg" style="height:30px">
    <span style="padding:0 1rem;">Sign in with</span>

A block style button:
Alt Text

<div style="display:inline-block;padding:0.3em;margin:1em;background:#00dfc0;color:white;">
  <span style="display:flex;align-items:center;">
    <img src="/logo.svg#light-mono" style="height:30px">
    <span style="padding:0 1rem;font-weight:bold;white-space:nowrap;">Sign in</span>

A dark sign in button:
Alt Text

<div style="display:inline-block;padding:0.3em;margin:1em;background:#2a454e;color:white;">
  <span style="display:flex;align-items:center;">
    <img src="/logo.svg#light" style="height:30px">
    <span style="padding:0 1rem;font-weight:bold;white-space:nowrap;">Sign in</span>

An icon only button:
Alt Text

<img src="/icon.svg#light-mono" style="height:40px;background:#00dfc0;padding:0.5em;border-radius:1em;">

To turn the image into a button that triggers the authentication flow you can create a form and add your button into the html tag that handles submission.
Here's an example from's Step By Step Integration guide.

<form action="" method="get">
  <input name="client_id" value="[CLIENT_ID]" type="hidden" />
  <input name="redirect_uri" value="[REDIRECT_URI]" type="hidden" />
  <input name="response_mode" value="form_post" type="hidden" />

  <button type="submit">Sign in</button>

Feel free to reach out to me if you have any questions about our custom buttons. I can be found by emailing

Discussion (0)

Editor guide