---
description: How to properly attribute Blockly.
title: Attribute Blockly
image: images/blockly_banner.png
---

import Image from '@site/src/components/Image';

# Attribute Blockly

Blockly's code is open source and free to use without attribution.

However, we do encourage developers who are using Blockly to reference the
product in their website, app, or product. This page describes the best
practices for referring to Blockly and attributing it as well as appropriate
uses of the logo.

<a
  className="button button-primary downloadAsset"
  href="/images/logos/blockly_logos_all.zip"
  target="_blank">
  Download all assets
</a>

## How to refer to Blockly

### Describing and attributing Blockly in text

Upon first reference in a paragraph, use the primary one-line description:

> Blockly is an open-source developer library from the Raspberry Pi Foundation, originally developed at Google.
> It creates a visual programming interface that uses drag-and-drop blocks.

When referring to Blockly in the context of another app which uses Blockly
you should use the phrase "Built with Blockly".

When giving Blockly attribution, this phrase should be used for blog posts,
press interviews, the app, and on your website.

### Reference do's and don'ts

:::tip[Do]
Call Blockly "beginner friendly" instead of "kid friendly." Blockly is used for
a variety of applications, not all of which are kid focused.
:::

:::danger[Don't]
Refer to Blockly as a language (for example, as a "block-based programming
language"). Blockly is not a language, it's a library that developers use to
make a block-based visual programming interface.
:::

## How to visually represent Blockly

### Attributing Blockly with a logo

To give Blockly attribution in your app or website, please use one of the
following logos, depending on background color:

<table>
  <theader>
    <tr>
      <th style={{ backgroundColor: 'white' }}>
        <Image
          src="/images/logos/built-with-blockly-badge-white.png"
          alt="Built on Blockly white"
          width="240"
        />
      </th>
      <th style={{ backgroundColor: 'white' }}>
        <Image
          src="/images/logos/built-with-blockly-badge-black.png"
          alt="Built on Blockly black"
          width="250"
        />
      </th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>
        For light backgrounds with overlapping shapes or varied patterns, and
        for solid dark backgrounds (no shapes or patterns) with high contrast.
      </td>
      <td>For dark backgrounds with overlapping shapes or varied patterns.</td>
    </tr>
    <tr>
      <td>
        <a
          className="assetDownloadLink"
          href="/images/logos/built-with-blockly-badge-white.png"
          target="_blank">
          PNG
        </a>
        <a
          className="assetDownloadLink"
          href="/images/logos/built-with-blockly-badge-white.svg"
          target="_blank">
          SVG
        </a>
      </td>
      <td>
        <a
          className="assetDownloadLink"
          href="/images/logos/built-with-blockly-badge-black.png"
          target="_blank">
          PNG
        </a>
        <a
          className="assetDownloadLink"
          href="/images/logos/built-with-blockly-badge-black.svg"
          target="_blank">
          SVG
        </a>
      </td>
    </tr>
  </tbody>
</table>

Please hyperlink the badge to Blockly's home page: [https://www.blockly.com](https://www.blockly.com)

### Badge sizing and spacing

<div style={{ display: 'flex', alignItems: 'flex-start', gap: '20px' }}>
  <div style={{ flex: '1 1 50%' }}>
    <p>
      To ensure legibility, badges should not be used with a height smaller than
      24px.
    </p>
    <p>
      For lockups, provide at least x-height and width x1 white space around the
      logo. Never crowd or overlap the logo with other elements.
    </p>
  </div>
  <div style={{ flex: '1 1 50%' }}>
    <Image
      src="/images/logos/blockly-badge.png"
      className="blockly-badge-light"
      alt="Blockly Badge"
    />
    <Image
      src="/images/logos/blockly-badge-dark.png"
      className="blockly-badge-dark"
      alt="Blockly Badge"
    />
  </div>
</div>

### Other uses of the Blockly logo

Do not use the Blockly mark or any variant of the Blockly mark in conjunction
with the overall name of your application, product, service, or website without
permission from the Blockly team (please email support@blockly.com to
request permission). Do not alter or use the Blockly mark in a way that may be
confusing or misleading, and never use Blockly branding as the most prominent
element on your page.

<table>
  <tr>
    <td style={{ backgroundColor: 'white', verticalAlign: 'middle' }}>
      <Image
        src="/images/logos/logo_standard.png"
        alt="Standard Blockly logo"
      />
    </td>
    <td>
      <h2>Standard lockup</h2>
      <p>The standard lockup can be used in slide decks and blog posts.</p>
      <p>
        Whenever possible, the logo should be represented as a horizontal lockup
        with a full color logomark and neutral 700 (#5F6368) or solid white
        logotype.
      </p>
      <a
        className="assetDownloadLink"
        href="/images/logos/logo_standard.png"
        target="_blank">
        PNG
      </a>
      <a
        className="assetDownloadLink"
        href="/images/logos/logo_standard.svg"
        target="_blank">
        SVG
      </a>
    </td>
  </tr>
</table>

<table style={{ tableLayout: 'fixed' }}>
  <tbody>
    <tr>
      <th style={{ backgroundColor: 'white', textAlign: 'center' }}>
        <Image
          src="/images/logos/logo_vertical.png"
          alt="Blockly vertical logo"
          height="120"
          className="logo-version"
        />
      </th>
      <th style={{ backgroundColor: 'white', textAlign: 'center' }}>
        <Image
          src="/images/logos/logo_only.png"
          alt="Blockly logomark"
          height="120"
          className="logo-version"
        />
      </th>
      <th style={{ backgroundColor: 'white', textAlign: 'center' }}>
        <Image
          src="/images/logos/logo_knockout_with_bg.png"
          alt="Blockly knockout logo"
          height="120"
          className="logo-version"
        />
      </th>
    </tr>
    <tr>
      <td>
        When there is limited horizontal space, a vertical lockup can be used
        with the full color logomark and neutral 700 (#5F6368) or solid white
        logotype.
      </td>
      <td>
        When there is limited vertical and horizontal space, the logomark can be
        used by itself without the logotype.
      </td>
      <td>
        When the color of the logomark has poor contrast with the background, a
        solid white knockout version can be used.
      </td>
    </tr>
    <tr>
      <td>
        <a
          className="assetDownloadLink"
          href="/images/logos/logo_vertical.png"
          target="_blank">
          PNG
        </a>
        <a
          className="assetDownloadLink"
          href="/images/logos/logo_vertical.svg"
          target="_blank">
          SVG
        </a>
      </td>
      <td>
        <a
          className="assetDownloadLink"
          href="/images/logos/logo_only.png"
          target="_blank">
          PNG
        </a>
        <a
          className="assetDownloadLink"
          href="/images/logos/logo_only.svg"
          target="_blank">
          SVG
        </a>
      </td>
      <td>
        <a
          className="assetDownloadLink"
          href="/images/logos/logo_knockout_with_bg.png"
          target="_blank">
          PNG
        </a>
        <a
          className="assetDownloadLink"
          href="/images/logos/logo_knockout_with_bg.svg"
          target="_blank">
          SVG
        </a>
      </td>
    </tr>
  </tbody>
</table>

### Logo colours

<table style={{ tableLayout: 'fixed' }}>
  <tbody>
    <tr>
      <th style={{ backgroundColor: '#4285f4', textAlign: 'center' }}></th>
      <th style={{ backgroundColor: '#c8d1db', textAlign: 'center' }}></th>
      <th style={{ backgroundColor: '#5f6368', textAlign: 'center' }}></th>
    </tr>
    <tr>
      <td>
        <b>Blockly blue</b>
        <p>#4285f4 or hsla(217, 89%, 61%, 1)</p>
      </td>
      <td>
        <b>Blockly gray</b>
        <p>#c8d1db or hsla(212, 21%, 82%, 1)</p>
      </td>
      <td>
        <b>Neutral 700</b>
        <p>#5f6368 or hsla(213, 5%, 39%, 1)</p>
      </td>
    </tr>
  </tbody>
</table>

<div style={{ display: 'flex', alignItems: 'flex-start', gap: '20px' }}>
  <div style={{ flex: '1 1 60%' }}>
    <h3>Sizing and spacing</h3>
    <p>
      To ensure legibility, the logo should not be used with a height smaller
      than 24px.
    </p>
    <p>
      For lockups, provide at least x-height x2 white space around the logo.
      Never crowd or overlap the logo with other elements.
    </p>
    <h3>Common errors</h3>
    <b>Do not...</b>
    <ul>
      <li>Alter or distort the logo in any way</li>
      <li>Use the white knockout in any color but white</li>
      <li>Alter color, shape, or angles</li>
      <li>Rotate or flip in any direction</li>
      <li>Alter proportions, positioning, or placement</li>
      <li>Replace the logotype with a different typeface</li>
      <li>
        Use the old Blockly logo (existing uses should be updated when
        convenient)
      </li>
      <li>
        Use the logo on a poorly contrasting background (e.g. the knockout logo
        on a light gray background)
      </li>
      <li>Overlap or crowd the logo with other elements</li>
      <li>Redraw the logo</li>
    </ul>
  </div>
  <div style={{ flex: '1 1 40%' }}>
    <Image
      src="/images/logos/logo_x_height.png"
      alt="Height references for padding the logo"
      width="380"
    />
  </div>
</div>
