180 logos

Fictional company marks and wordmarks for the mockup you are filling in. Invented names, invented shapes, nobody’s trademark.

30 invented brands × 6 mark families.

Palette

Scheme

Lockup

Colour

180 shown

Northwind · monogram

Logistics. The initial in a rounded tile. The most common real-world shape by a distance, and the only family that still reads at 16px in a browser tab.

Download

htmlSVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 32" role="img" width="250" height="64" class="a-indigo-auto">
  <title>Northwind</title>
  <style>
    .a-indigo-auto {
      --a-bg: #f5f3ff;
      --a-base: #c7d2fe;
      --a-accent: #4f46e5;
      --a-ink: #1e1b4b;
      --a-tint: #e0e7ff;
    }
    @media (prefers-color-scheme: dark) {
      .a-indigo-auto {
        --a-bg: #1e1b4b;
        --a-base: #4338ca;
        --a-accent: #a5b4fc;
        --a-ink: #eef2ff;
        --a-tint: #312e81;
      }
    }
  </style>
  <rect width="32" height="32" rx="8" fill="var(--a-accent, #4f46e5)" />
  <text x="16" y="22" text-anchor="middle" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" font-size="17" font-weight="700" fill="var(--a-bg, #f5f3ff)">N</text>
  <text x="42" y="22" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" font-size="17" font-weight="650" letter-spacing="-0.4" fill="var(--a-ink, #1e1b4b)">Northwind</text>
</svg>

tsxReact component

import type * as React from 'react'

export function NorthwindLogo(props: React.SVGProps<SVGSVGElement>) {
  return (
      <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 32" role="img" width="125" height="32" className="a-indigo-auto">
      <title>Northwind</title>
      <style>
      .a-indigo-auto {
      --a-bg: #f5f3ff;
      --a-base: #c7d2fe;
      --a-accent: #4f46e5;
      --a-ink: #1e1b4b;
      --a-tint: #e0e7ff;
      }
      @media (prefers-color-scheme: dark) {
      .a-indigo-auto {
      --a-bg: #1e1b4b;
      --a-base: #4338ca;
      --a-accent: #a5b4fc;
      --a-ink: #eef2ff;
      --a-tint: #312e81;
      }
      }
      </style>
      <rect width="32" height="32" rx="8" fill="var(--a-accent, #4f46e5)"  />
      <text x="16" y="22" textAnchor="middle" fontFamily="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize="17" fontWeight="700" fill="var(--a-bg, #f5f3ff)">N</text>
      <text x="42" y="22" fontFamily="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize="17" fontWeight="650" letterSpacing="-0.4" fill="var(--a-ink, #1e1b4b)">Northwind</text>
      </svg>
  )
}

mark families crossed with invented brand names and palettes. Free for anything, including commercial work, with no attribution.

import type * as React from 'react' export function NorthwindLogo(props: React.SVGProps<SVGSVGElement>) { return ( <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 32" role="img" width="125" height="32" className="a-indigo-auto"> <title>Northwind</title> <style> .a-indigo-auto { --a-bg: #f5f3ff; --a-base: #c7d2fe; --a-accent: #4f46e5; --a-ink: #1e1b4b; --a-tint: #e0e7ff; } @media (prefers-color-scheme: dark) { .a-indigo-auto { --a-bg: #1e1b4b; --a-base: #4338ca; --a-accent: #a5b4fc; --a-ink: #eef2ff; --a-tint: #312e81; } } </style> <rect width="32" height="32" rx="8" fill="var(--a-accent, #4f46e5)" /> <text x="16" y="22" textAnchor="middle" fontFamily="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize="17" fontWeight="700" fill="var(--a-bg, #f5f3ff)">N</text> <text x="42" y="22" fontFamily="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize="17" fontWeight="650" letterSpacing="-0.4" fill="var(--a-ink, #1e1b4b)">Northwind</text> </svg> ) }