product of
experience.

Brand guide · Files

Logo and
icon files.

The wordmark, the “pe” monogram, app icons, profile pictures and banners. Use them when you’re making something with Product of Experience on it, and follow the wordmark rules.

Everything

Download all files

ZIP · 1.8 MB · 81 files in SVG, PNG and ICO

  1. 01 Wordmark
  2. 02 Icon
  3. 03 Profile pictures
  4. 04 Apps and favicons
  5. 05 Banners

01

Wordmark.

Stacked is the default. Use one line where height is tight. SVG scales to any size. The PNGs have a transparent background and are named by width in pixels.

product of experience wordmark, stacked, ink, blue full stop

Stacked · Ink, blue full stop

For light backgrounds. The default.

SVG PNG 600 PNG 1200 PNG 2400

product of experience wordmark, stacked, white, lime full stop

Stacked · White, lime full stop

For ink, blue or a photo.

SVG PNG 600 PNG 1200 PNG 2400

product of experience wordmark, stacked, black only

Stacked · Black only

One-colour print only.

SVG PNG 600 PNG 1200 PNG 2400

product of experience wordmark, stacked, white only

Stacked · White only

One colour on dark, only where lime isn’t possible.

SVG PNG 600 PNG 1200 PNG 2400

product of experience wordmark, one line, ink, blue full stop

One line · Ink, blue full stop

For light backgrounds. The default.

SVG PNG 600 PNG 1200 PNG 2400

product of experience wordmark, one line, white, lime full stop

One line · White, lime full stop

For ink, blue or a photo.

SVG PNG 600 PNG 1200 PNG 2400

product of experience wordmark, one line, black only

One line · Black only

One-colour print only.

SVG PNG 600 PNG 1200 PNG 2400

product of experience wordmark, one line, white only

One line · White only

One colour on dark, only where lime isn’t possible.

SVG PNG 600 PNG 1200 PNG 2400

On a background, with clear space

For an email signature: the stacked wordmark on white, 600 px. Set it to 300 px wide so it stays sharp. All wordmark files in one ZIP (1.3 MB).

02

Icon.

Lowercase “pe” in ink on a lime tile. Use it wherever the wordmark would be too small: avatars, app icons, favicons. Don’t recolour it or add a border.

pe monogram, rounded

Rounded

The master. Slides, documents, anywhere you place it yourself.

SVG PNG 256 PNG 1024

pe monogram, square

Square

For platforms that round or crop it themselves.

SVG PNG 1080

pe monogram, small

Small

Bigger letters for 16 to 48 px.

SVG PNG 32 PNG 48

pe monogram, maskable

Maskable

Letters pulled in to survive any mask shape (Android, web apps).

SVG PNG 512

03

Profile pictures.

Upload the square file and let the platform crop it to a circle. The letters sit well inside the crop. On a personal profile where people expect a face, use Scott’s photo and keep the monogram for the business page.

PlatformFile
LinkedIn, X, Google, TikTokPNG 400 × 400 14 KB
Facebook, YouTube, WhatsApp Business, Slack, GitHub, SubstackPNG 800 × 800 29 KB
Instagram, Threads, anything asking for 1080 or morePNG 1080 × 1080 42 KB

04

Apps and favicons.

Every size each platform asks for, zipped by platform.

SetFile
Website favicons
favicon.ico, icon.svg, Apple touch icon (180), 16, 32, 48, 192, 512 and maskable 512.
ZIP 67 KB
iOS app
AppIcon 1024 (all Xcode needs now) and the older sizes from 20 to 180. Square, no transparency: iOS rounds the corners.
ZIP 56 KB
Android app
Google Play 512, adaptive icon foreground 432, and launcher icons from 48 to 192.
ZIP 57 KB
Desktop
Windows .ico (16 to 256), for Zoom, Teams and desktop apps.
ICO 26 KB

05

Banners.

The line with the highlighter, on paper. The text sits to the right because most platforms put the profile picture over the bottom left.

Need a size that isn’t here? Send a message.

What’s been sitting
on your desk
too long?

Tell me what’s going on. We’ll work out where I can help.

Let’s have a chat