> ## Documentation Index
> Fetch the complete documentation index at: https://docs.percify.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Percify logo: download SVG and PNG

> Download the official Percify logo in SVG and transparent PNG: the lightning P icon, the app icon and the full wordmark, from 16 px to 3200 px, for light and dark backgrounds.

The Percify logo is a lightning bolt drawn into a capital P, set beside the name **Percify**. Every file on this page is original artwork. The SVGs come straight from the design source, and each PNG is rendered from them at its exact size on a transparent background.

<Frame caption="The Percify logo on a dark background">
  <div className="bg-black rounded-xl p-12 flex items-center justify-center gap-10 not-prose">
    <img src="https://mintcdn.com/percify-e94d5fec/EL2lz_h-CYi8M_BL/assets/logo/percify-logo-white.svg?fit=max&auto=format&n=EL2lz_h-CYi8M_BL&q=85&s=6c1de53bbb1bf9c3ebb89a4cf1a83939" alt="Percify logo: the yellow lightning P icon beside the white Percify wordmark" width="824" height="188" className="w-full max-w-md h-auto" data-path="assets/logo/percify-logo-white.svg" />
  </div>
</Frame>

## Percify icon

The lightning P on its own, in Percify yellow. Use it where the name is already written nearby, or where the space is square.

<Frame caption="Percify icon, yellow, on a transparent background">
  <div className="bg-neutral-900 rounded-xl p-10 flex items-center justify-center gap-10 not-prose">
    <img src="https://mintcdn.com/percify-e94d5fec/Mxy6ejDHFMl1RmdW/assets/logo/percify-icon.svg?fit=max&auto=format&n=Mxy6ejDHFMl1RmdW&q=85&s=576bc5a08037aac2601a3cd35b539e03" alt="Percify icon: a yellow lightning bolt shaped into the letter P" width="614" height="593" className="w-40 h-auto" data-path="assets/logo/percify-icon.svg" />
  </div>
</Frame>

| File                 | Download                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| SVG, vector          | <a href="/assets/logo/percify-icon.svg" download>percify-icon.svg</a>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| PNG, transparent, px | <a href="/assets/logo/percify-icon-16.png" download>16</a> · <a href="/assets/logo/percify-icon-32.png" download>32</a> · <a href="/assets/logo/percify-icon-48.png" download>48</a> · <a href="/assets/logo/percify-icon-64.png" download>64</a> · <a href="/assets/logo/percify-icon-128.png" download>128</a> · <a href="/assets/logo/percify-icon-180.png" download>180</a> · <a href="/assets/logo/percify-icon-192.png" download>192</a> · <a href="/assets/logo/percify-icon-256.png" download>256</a> · <a href="/assets/logo/percify-icon-512.png" download>512</a> · <a href="/assets/logo/percify-icon-1024.png" download>1024</a> · <a href="/assets/logo/percify-icon-2048.png" download>2048</a> |

## One-color icon

Black for light backgrounds, white for dark backgrounds and photos.

<Frame caption="Percify icon in black and in white">
  <div className="grid grid-cols-2 rounded-xl overflow-hidden not-prose">
    <div className="bg-white p-10 flex justify-center">
      <img src="https://mintcdn.com/percify-e94d5fec/Mxy6ejDHFMl1RmdW/assets/logo/percify-icon-black.svg?fit=max&auto=format&n=Mxy6ejDHFMl1RmdW&q=85&s=8b649c7f177bfd1c0b349da8bbec7412" alt="Percify icon in black" width="614" height="593" className="w-32 h-auto" data-path="assets/logo/percify-icon-black.svg" />
    </div>

    <div className="bg-black p-10 flex justify-center">
      <img src="https://mintcdn.com/percify-e94d5fec/Mxy6ejDHFMl1RmdW/assets/logo/percify-icon-white.svg?fit=max&auto=format&n=Mxy6ejDHFMl1RmdW&q=85&s=2f3d995781813f14d7e91cf95b77a62a" alt="Percify icon in white" width="614" height="593" className="w-32 h-auto" data-path="assets/logo/percify-icon-white.svg" />
    </div>
  </div>
</Frame>

| Version | SVG                                                            | PNG, transparent, px                                                                                                                                                                                                                                                                                                                                       |
| ------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Black   | <a href="/assets/logo/percify-icon-black.svg" download>SVG</a> | <a href="/assets/logo/percify-icon-black-128.png" download>128</a> · <a href="/assets/logo/percify-icon-black-256.png" download>256</a> · <a href="/assets/logo/percify-icon-black-512.png" download>512</a> · <a href="/assets/logo/percify-icon-black-1024.png" download>1024</a> · <a href="/assets/logo/percify-icon-black-2048.png" download>2048</a> |
| White   | <a href="/assets/logo/percify-icon-white.svg" download>SVG</a> | <a href="/assets/logo/percify-icon-white-128.png" download>128</a> · <a href="/assets/logo/percify-icon-white-256.png" download>256</a> · <a href="/assets/logo/percify-icon-white-512.png" download>512</a> · <a href="/assets/logo/percify-icon-white-1024.png" download>1024</a> · <a href="/assets/logo/percify-icon-white-2048.png" download>2048</a> |

## App icon

The icon on a black rounded tile, as used for app shortcuts and profile pictures.

<Frame caption="Percify app icon">
  <div className="bg-neutral-200 dark:bg-neutral-800 rounded-xl p-10 flex items-center justify-center gap-10 not-prose">
    <img src="https://mintcdn.com/percify-e94d5fec/Mxy6ejDHFMl1RmdW/assets/logo/percify-app-icon.svg?fit=max&auto=format&n=Mxy6ejDHFMl1RmdW&q=85&s=880865786fb6de007693bfc19847c94f" alt="Percify app icon: the yellow lightning P on a black rounded square" width="1024" height="1024" className="w-40 h-auto" data-path="assets/logo/percify-app-icon.svg" />
  </div>
</Frame>

| File        | Download                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| SVG, vector | <a href="/assets/logo/percify-app-icon.svg" download>percify-app-icon.svg</a>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| PNG, px     | <a href="/assets/logo/percify-app-icon-16.png" download>16</a> · <a href="/assets/logo/percify-app-icon-32.png" download>32</a> · <a href="/assets/logo/percify-app-icon-48.png" download>48</a> · <a href="/assets/logo/percify-app-icon-64.png" download>64</a> · <a href="/assets/logo/percify-app-icon-128.png" download>128</a> · <a href="/assets/logo/percify-app-icon-180.png" download>180</a> · <a href="/assets/logo/percify-app-icon-192.png" download>192</a> · <a href="/assets/logo/percify-app-icon-256.png" download>256</a> · <a href="/assets/logo/percify-app-icon-512.png" download>512</a> · <a href="/assets/logo/percify-app-icon-1024.png" download>1024</a> · <a href="/assets/logo/percify-app-icon-2048.png" download>2048</a> |

## Round app icon

The same tile as a circle. This is the favicon of percify.io and app.percify.io.

<Frame caption="Percify round app icon">
  <div className="bg-neutral-200 dark:bg-neutral-800 rounded-xl p-10 flex items-center justify-center gap-10 not-prose">
    <img src="https://mintcdn.com/percify-e94d5fec/Mxy6ejDHFMl1RmdW/assets/logo/percify-app-icon-round.svg?fit=max&auto=format&n=Mxy6ejDHFMl1RmdW&q=85&s=1c68434418380a926a47f7c7665d77b3" alt="Percify round app icon: the yellow lightning P on a black circle" width="1005" height="1005" className="w-40 h-auto" data-path="assets/logo/percify-app-icon-round.svg" />
  </div>
</Frame>

| File        | Download                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| SVG, vector | <a href="/assets/logo/percify-app-icon-round.svg" download>percify-app-icon-round.svg</a>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| PNG, px     | <a href="/assets/logo/percify-app-icon-round-16.png" download>16</a> · <a href="/assets/logo/percify-app-icon-round-32.png" download>32</a> · <a href="/assets/logo/percify-app-icon-round-48.png" download>48</a> · <a href="/assets/logo/percify-app-icon-round-64.png" download>64</a> · <a href="/assets/logo/percify-app-icon-round-128.png" download>128</a> · <a href="/assets/logo/percify-app-icon-round-180.png" download>180</a> · <a href="/assets/logo/percify-app-icon-round-192.png" download>192</a> · <a href="/assets/logo/percify-app-icon-round-256.png" download>256</a> · <a href="/assets/logo/percify-app-icon-round-512.png" download>512</a> · <a href="/assets/logo/percify-app-icon-round-1024.png" download>1024</a> · <a href="/assets/logo/percify-app-icon-round-2048.png" download>2048</a> |

## Percify wordmark

The icon with the name. Use black text on light backgrounds and white text on dark ones.

<Frame caption="Percify wordmark for light and for dark backgrounds">
  <div className="grid grid-cols-1 sm:grid-cols-2 rounded-xl overflow-hidden not-prose">
    <div className="bg-white p-10 flex items-center justify-center">
      <img src="https://mintcdn.com/percify-e94d5fec/EL2lz_h-CYi8M_BL/assets/logo/percify-logo.svg?fit=max&auto=format&n=EL2lz_h-CYi8M_BL&q=85&s=37e551c1f0eb00ffa8ee4dc80679f2b9" alt="Percify wordmark with black text for light backgrounds" width="824" height="188" className="w-full max-w-xs h-auto" data-path="assets/logo/percify-logo.svg" />
    </div>

    <div className="bg-black p-10 flex items-center justify-center">
      <img src="https://mintcdn.com/percify-e94d5fec/EL2lz_h-CYi8M_BL/assets/logo/percify-logo-white.svg?fit=max&auto=format&n=EL2lz_h-CYi8M_BL&q=85&s=6c1de53bbb1bf9c3ebb89a4cf1a83939" alt="Percify wordmark with white text for dark backgrounds" width="824" height="188" className="w-full max-w-xs h-auto" data-path="assets/logo/percify-logo-white.svg" />
    </div>
  </div>
</Frame>

<Frame caption="One-color Percify wordmark in black and in white">
  <div className="grid grid-cols-1 sm:grid-cols-2 rounded-xl overflow-hidden not-prose">
    <div className="bg-white p-10 flex items-center justify-center">
      <img src="https://mintcdn.com/percify-e94d5fec/EL2lz_h-CYi8M_BL/assets/logo/percify-logo-black.svg?fit=max&auto=format&n=EL2lz_h-CYi8M_BL&q=85&s=dcd42cb8684dbb5833be5c3ee5d1b77e" alt="One-color black Percify wordmark" width="824" height="188" className="w-full max-w-xs h-auto" data-path="assets/logo/percify-logo-black.svg" />
    </div>

    <div className="bg-black p-10 flex items-center justify-center">
      <img src="https://mintcdn.com/percify-e94d5fec/EL2lz_h-CYi8M_BL/assets/logo/percify-logo-white-mono.svg?fit=max&auto=format&n=EL2lz_h-CYi8M_BL&q=85&s=5d8f76e17a0558baf4ed75a3e12810d4" alt="One-color white Percify wordmark" width="824" height="188" className="w-full max-w-xs h-auto" data-path="assets/logo/percify-logo-white-mono.svg" />
    </div>
  </div>
</Frame>

| Version                 | SVG                                                                 | PNG, transparent, width in px                                                                                                                                                                                                                                                                                 |
| ----------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Black text, yellow icon | <a href="/assets/logo/percify-logo.svg" download>SVG</a>            | <a href="/assets/logo/percify-logo-400w.png" download>400</a> · <a href="/assets/logo/percify-logo-800w.png" download>800</a> · <a href="/assets/logo/percify-logo-1600w.png" download>1600</a> · <a href="/assets/logo/percify-logo-3200w.png" download>3200</a>                                             |
| White text, yellow icon | <a href="/assets/logo/percify-logo-white.svg" download>SVG</a>      | <a href="/assets/logo/percify-logo-white-400w.png" download>400</a> · <a href="/assets/logo/percify-logo-white-800w.png" download>800</a> · <a href="/assets/logo/percify-logo-white-1600w.png" download>1600</a> · <a href="/assets/logo/percify-logo-white-3200w.png" download>3200</a>                     |
| One color, black        | <a href="/assets/logo/percify-logo-black.svg" download>SVG</a>      | <a href="/assets/logo/percify-logo-black-400w.png" download>400</a> · <a href="/assets/logo/percify-logo-black-800w.png" download>800</a> · <a href="/assets/logo/percify-logo-black-1600w.png" download>1600</a> · <a href="/assets/logo/percify-logo-black-3200w.png" download>3200</a>                     |
| One color, white        | <a href="/assets/logo/percify-logo-white-mono.svg" download>SVG</a> | <a href="/assets/logo/percify-logo-white-mono-400w.png" download>400</a> · <a href="/assets/logo/percify-logo-white-mono-800w.png" download>800</a> · <a href="/assets/logo/percify-logo-white-mono-1600w.png" download>1600</a> · <a href="/assets/logo/percify-logo-white-mono-3200w.png" download>3200</a> |

## Which file to use

| Where                      | File                                 |
| -------------------------- | ------------------------------------ |
| Website or app header      | Wordmark, SVG                        |
| Social profile picture     | App icon, 1024 px PNG                |
| Favicon                    | Round app icon, 32 px and 180 px PNG |
| Slides and documents       | Wordmark, 1600 px PNG                |
| Print                      | Any SVG                              |
| On top of a photo or video | One-color white icon or wordmark     |

## Using the logo

* Keep the proportions. Don't stretch, rotate or crop the logo.
* Use the colors as supplied: yellow, black or white. Don't add outlines, shadows or gradients.
* Leave clear space around the logo, at least half the height of the icon.
* On light gray or yellow backgrounds, use the one-color black version so it stays readable.
* Write the name as **Percify**: one word, capital P.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="What color is the Percify logo?">
    Percify yellow, hex `#FFD200`, usually on black. The one-color versions are pure black `#000000` or pure white `#FFFFFF`. All values are on [Brand colors](/brand/colors).
  </Accordion>

  <Accordion title="Where can I download the Percify logo as a PNG?">
    On this page. The icon and both app icons come as transparent PNGs from 16 to 2048 px, and the wordmark from 400 to 3200 px wide. Every file also has an SVG.
  </Accordion>

  <Accordion title="Which Percify logo should I use on a dark background?">
    The wordmark with white text and the yellow icon, `percify-logo-white.svg`. On photos or busy backgrounds use the one-color white version.
  </Accordion>

  <Accordion title="Can I use the Percify logo in an article or review?">
    Yes, to refer to Percify. Use the files as supplied, without changing them, and don't suggest that Percify endorses your product. For anything else, email [support@percify.io](mailto:support@percify.io).
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Banners and social images" href="/brand/banners">
    Open Graph, X, LinkedIn, YouTube and more, at exact sizes
  </Card>

  <Card title="Brand colors" href="/brand/colors">
    Hex codes for Percify yellow, gold, amber and neutrals
  </Card>

  <Card title="App screenshots" href="/brand/screenshots">
    Real screens of the product for articles and listings
  </Card>

  <Card title="Press kit on percify.io" href="https://percify.io/company/press-kit">
    Company background and boilerplate
  </Card>
</CardGroup>
