Brand Guidelines

Official Supabase logos and colors, as SVG and PNG files for light and dark backgrounds Go to the logo files

Icon

The green symbol without lettering. Use it in small spaces, such as avatars, app icons, or a row of partner logos.

1
<img
2
  src="https://supabase.com/brand-assets/supabase-icon-green-transparent.svg"
3
  alt="Supabase"
4
  width="23"
5
  height="24"
6
/>

Light

.svg .png

1
<img
2
  src="https://supabase.com/brand-assets/supabase-icon-green-transparent.svg"
3
  alt="Supabase"
4
  width="23"
5
  height="24"
6
/>

Dark

.svg .png

Wordmark

The symbol and the Supabase lettering together. Use it by default when there is space for the name.

1
<img
2
  src="https://supabase.com/brand-assets/supabase-logo-green-black-transparent.svg"
3
  alt="Supabase"
4
  width="124"
5
  height="24"
6
/>

Light

.svg .png

1
<img
2
  src="https://supabase.com/brand-assets/supabase-logo-green-white-transparent.svg"
3
  alt="Supabase"
4
  width="124"
5
  height="24"
6
/>

Dark

.svg .png

One-color wordmark

The wordmark in black or white. Use it when you can print only one color, or on top of a photo.

1
<img
2
  src="https://supabase.com/brand-assets/supabase-logo-black-transparent.svg"
3
  alt="Supabase"
4
  width="123"
5
  height="24"
6
/>

Light

.svg .png

1
<img
2
  src="https://supabase.com/brand-assets/supabase-logo-white-transparent.svg"
3
  alt="Supabase"
4
  width="123"
5
  height="24"
6
/>

Dark

.svg .png

Colors

Supabase green is the main color of the logo symbol. Use the grays for backgrounds behind the logo. The files already have the logo colors, so do not repaint the logo. Each value is valid CSS.

Supabase green

brand-default

HEX: #3ECF8E
RGB: rgb(62 207 142)
HSL: hsl(153.1 60.2% 52.7%)
OKLCH: oklch(76.2% 0.154 159.4)

Dark gray

gray-dark-200

HEX: #1C1C1C
RGB: rgb(28 28 28)
HSL: hsl(0 0% 11%)
OKLCH: oklch(22.6% 0 0)

Light gray

gray-light-200

HEX: #F8F8F8
RGB: rgb(248 248 248)
HSL: hsl(0 0% 97.3%)
OKLCH: oklch(97.9% 0 0)

Integrations

Use the Connect Supabase button to start the OAuth 2.0 flow in your Supabase integration. Do not use the button as a logo.

1
<img
2
  src="https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/supabase-brand-assets/connect-supabase/connect-supabase-dark.svg"
3
  alt="Connect Supabase"
4
  width="156"
5
  height="31"
6
/>

Light

.svg .zip

1
<img
2
  src="https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/supabase-brand-assets/connect-supabase/connect-supabase-light.svg"
3
  alt="Connect Supabase"
4
  width="156"
5
  height="31"
6
/>

Dark

.svg .zip

Which file to use

Choose the file for the background where the logo appears, not for your browser or editor theme.
All files have a transparent background.
There is no file with the lettering alone. Every wordmark file includes the symbol.

Name

Write Supabase as one word, with a capital S. Do not write SupaBase or Supa Base.

Usage

Use the Supabase logos only to refer to Supabase. Do not change the files or the logo colors.

Supabase and the Supabase logo are trademarks of Supabase Inc.

Build in a weekend, scale to millions

Start your project Request a demo