# The PostHog logo
> Every PostHog logo lockup from one React component: landscape, stacked, logomark and wordmark, in gradient, 4-color print or mono. Click the logomark and it jumps.
HTML version: https://brand.posthog.com/logo · All docs for agents: https://brand.posthog.com/llms.txt
## Which logo to use
| Version | When to use it | SVG | PNG | JSX |
| --- | --- | --- | --- | --- |
| Standard logo | The primary, full-color logo. Use it by default. | [posthog-logo.svg](https://brand.posthog.com/logo/posthog-logo.svg) | [posthog-logo.png](https://brand.posthog.com/logo/posthog-logo.png) | `` |
| Light logo | For dark backgrounds. The standard logo should never go on one. | [posthog-logo-white.svg](https://brand.posthog.com/logo/posthog-logo-white.svg) | [posthog-logo-white.png](https://brand.posthog.com/logo/posthog-logo-white.png) | `` |
| Dark logo | For light backgrounds, when you need a single-color logo. | [posthog-logo-black.svg](https://brand.posthog.com/logo/posthog-logo-black.svg) | [posthog-logo-black.png](https://brand.posthog.com/logo/posthog-logo-black.png) | `` |
| Print (4-color) | For print and limited palettes that can't reproduce gradients. | [posthog-logo-print.svg](https://brand.posthog.com/logo/posthog-logo-print.svg) | [posthog-logo-print.png](https://brand.posthog.com/logo/posthog-logo-print.png) | `` |
| Stacked logo | For tall or square spaces where the landscape logo is too wide. | [posthog-logo-stacked.svg](https://brand.posthog.com/logo/posthog-logo-stacked.svg) | [posthog-logo-stacked.png](https://brand.posthog.com/logo/posthog-logo-stacked.png) | `` |
| Light stacked logo | The stacked logo for dark backgrounds. | [posthog-logo-stacked-white.svg](https://brand.posthog.com/logo/posthog-logo-stacked-white.svg) | [posthog-logo-stacked-white.png](https://brand.posthog.com/logo/posthog-logo-stacked-white.png) | `` |
| Logomark | Use it alone only at small sizes, like favicons and app icons. | [posthog-logomark.svg](https://brand.posthog.com/logo/posthog-logomark.svg) | [posthog-logomark.png](https://brand.posthog.com/logo/posthog-logomark.png) | `` |
| Light logomark | The logomark for dark backgrounds. | [posthog-logomark-white.svg](https://brand.posthog.com/logo/posthog-logomark-white.svg) | [posthog-logomark-white.png](https://brand.posthog.com/logo/posthog-logomark-white.png) | `` |
| Square logomark | For avatars and integrations that crop to a square (G2, X, LinkedIn). The padding keeps it from getting clipped. | [posthog-logomark-square.svg](https://brand.posthog.com/logo/posthog-logomark-square.svg) | [posthog-logomark-square.png](https://brand.posthog.com/logo/posthog-logomark-square.png) | None |
| Light square logomark | The square logomark for dark backgrounds. | [posthog-logomark-square-white.svg](https://brand.posthog.com/logo/posthog-logomark-square-white.svg) | [posthog-logomark-square-white.png](https://brand.posthog.com/logo/posthog-logomark-square-white.png) | None |
| Round logomark | For avatars that crop to a circle (Reddit, Slack). It fits inside the circle with room to spare. | [posthog-logomark-circle.svg](https://brand.posthog.com/logo/posthog-logomark-circle.svg) | [posthog-logomark-circle.png](https://brand.posthog.com/logo/posthog-logomark-circle.png) | None |
| Light round logomark | The round logomark for dark backgrounds. | [posthog-logomark-circle-white.svg](https://brand.posthog.com/logo/posthog-logomark-circle-white.svg) | [posthog-logomark-circle-white.png](https://brand.posthog.com/logo/posthog-logomark-circle-white.png) | None |
## Guidelines
Do:
- Use the standard logo by default.
- Use a light (white) logo on dark backgrounds.
- Use the square or round logomark for avatars and integrations.
- Send vendors the SVG. It scales without losing quality.
Don't:
- Put the standard logo on a dark background.
- Recolor parts of the logomark, like turning the hedgehog's face white on dark. Use the light logo instead.
- Use the logomark on its own, except at small sizes.
- Stretch the logomark to fill a square. Use the square logomark instead.
- Set “PostHog” in regular text next to the logomark. Use a lockup.
- Keep using old local files (the square font, the sharp-edged logomark). Replace them with these.
## In code
The logo ships as one React component, `import { Logo } from "@posthog/brand/logo"`, configured with props. The package has no separate SVG or PNG exports for it, so outside React, use the files below.
```tsx
import { Logo } from "@posthog/brand/logo"
// landscape lockup, full-color gradient
// logomark above the wordmark
// flat 4-color, for print
// single color (on dark backgrounds)
// the hedgehog icon only
// the "PostHog" wordmark only (always single-color)
// the logomark jumps when clicked
// in a Santa hat (or "halloween")
```
Props: `layout` (`landscape` default, `stacked`, `logomark`, `wordmark`), `variant` (`gradient` default, `print`, `mono`), `color` (any CSS color, for `mono` and the wordmark; inherits `currentColor` when omitted), `size` (width in px, height follows), `title` (accessible label), plus every native `