Logo Techniques

1. Simplicity scales. A logo must read clearly at 16px favicon size and 200px hero size. Eliminate detail that disappears at small sizes.
2. Geometric construction. Build from circles, rectangles, and triangles. Organic curves should still derive from geometric foundations.
3. Consistent stroke weight. If using strokes, keep them uniform unless intentional contrast is the design concept.
4. Limited color palette. 1-3 colors max. A good logo works in single-color (monochrome) form first, then gets color added.
5. No raster effects. Avoid filters, blur, drop shadows in the SVG itself. These don’t scale cleanly and add file size.

Typography in SVGs

When to use <text>

• Internal tools, dashboards, or prototypes where the font is guaranteed
• Dynamic text that changes (user names, labels)
• SVGs that need to be searchable/indexable
• When file size matters (text is tiny compared to outlined paths)

When to convert text to paths

• Logo wordmarks distributed as standalone files
• Any SVG that must render identically without font dependencies
• Icons containing letterforms (like a “B” for bold icon)
• Print/brand assets

Trade-off: Outlined text bloats file size significantly. A single word can go from ~200 bytes as <text> to 5-10KB as paths. Only outline when portability is required.

Negative Space Techniques

Negative space creates shapes through absence rather than presence. This is how you create logos where two meanings coexist (like the FedEx arrow).

Using fill-rule=”evenodd”

The simplest way. Overlapping subpaths within a single <path> automatically create holes:

Using clip-path

Cut one shape out of another:

Using mask with white/black

White areas of a mask are visible, black areas are hidden:

Combining Geometric Shapes

Layered composition

Stack shapes using document order (later elements render on top):

Compound path (single path, multiple subpaths)

Multiple M commands in one path create subpaths. Combined with fill-rule="evenodd", overlapping areas become transparent:

Creating Symmetrical Designs

Mirror technique

Design half the shape, then mirror it. For horizontal symmetry, design the right half and negate x-offsets for the left:

Using transform for symmetry

Rotational symmetry with transform

Logo Ideation: Exploring Metaphors

Don’t fixate on one concept. Before writing any SVG code, brainstorm 8-10 visual metaphors that represent the product. Then pick the 3-4 strongest and create variants of each.

Step 1: Mine the domain

The biggest source of generic logos is skipping this step. Before thinking about shapes, list 10-15 physical objects, tools, environments, textures, and actions that are specific to this product’s world:

• A marine logistics company: knots, anchors, currents, hull cross-sections, container stacks, signal flags, wake patterns, bollards, cargo nets
• A code editor: cursors, brackets, indentation, diff markers, tree structures, merge arrows, syntax highlighting bands, terminal prompts
• A bakery: wheat stalks, dough scoring patterns, rolling pins, oven arches, braided loaves, flour dusting, banneton spiral imprints

These domain objects become the raw material. If you can’t list 10, you don’t know the domain well enough yet.

Step 2: Semantic branching (literal -> abstract -> unexpected)

For each promising domain object, push through three levels of abstraction:

The best logos live at level 2-3. Level 1 is where cliches come from. Always push at least to level 2.

Step 3: Check against industry cliches

Before finalizing concepts, reject any that match common overused motifs:

If a concept matches this list, push it to level 2-3 abstraction or replace it entirely.

Step 4: Guarantee category diversity

Every logo set of 5+ options must include concepts from different structural categories, not just different metaphors rendered the same way:

Include at least 3 of these 5 categories. If all your concepts are symbolic icons, the set lacks structural variety regardless of how different the symbols are.

Step 5: SCAMPER one concept to push it further

Pick your most promising concept and run it through these lenses to generate unexpected variants:

• Substitute: Swap the expected symbol for something from a different domain
• Combine: Merge two unrelated visual ideas into one mark
• Adapt: Borrow visual language from another industry entirely
• Modify: Push scale, weight, or proportion to an extreme
• Put to other use: Use typography as illustration, or vice versa
• Eliminate: Strip to the absolute minimum recognizable form
• Reverse: Flip figure/ground, invert the concept, use negative space

You don’t need all 7. Even running 2-3 lenses on one concept often produces the most distinctive option in the set.

Rendering techniques that work at small sizes

These are techniques for how to render a concept, not concepts themselves. Pair with domain-specific metaphors:

What to avoid at small sizes

• Thin lines or strokes under 1.5px (on 32x32 viewBox)
• More than 6-7 distinct elements
• Text or letterforms with serifs
• Gradients with more than 2 stops (muddy at small sizes)
• Details that only appear above 48px

Isometric and 3D Techniques

Isometric projection creates a sense of depth using three visible faces. No perspective distortion, so it scales cleanly.

Basic isometric cube

Three parallelogram faces. The key angles: left face leans right, right face leans left, top face is a diamond.

Color convention: Top = lightest (lit from above), left = medium, right = darkest. This creates convincing depth with flat colors.

Stacked floating layers

Multiple diamond shapes floating above a base, suggesting data layers lifting out of a container.

Spatial budgeting for multi-element compositions

Before coding, plan the vertical distribution to avoid clipping:

Sketch this budget on paper first. Adjusting after the fact is tedious because moving one element means moving everything.

Dark Mode Variants for Colored Logos

Logos with hardcoded colors need separate dark-mode SVG files. currentColor logos can use CSS filter: brightness(0) invert(1) but colored logos cannot.

Color mapping for dark variants

File naming convention

Node ring + fill pattern (illustrated icon style)

A popular technique for colored logos: each node has a dark outer ring with a colored inner fill. Creates depth and reads well at small sizes.

Logo File Checklist

Before shipping a logo SVG:

• Not done: Works at 16px (favicon), 32px, 64px, and 200px+
• Not done: Works in monochrome (single color)
• Not done: Works on both light and dark backgrounds (use currentColor or provide dark variants for colored logos)
• Not done: Dark variants created for any logo with hardcoded colors (see dark mode section above)
• Not done: No content clipping at viewBox edges (check all coordinates are within bounds)
• Not done: No embedded fonts (text converted to paths)
• Not done: No editor metadata or hidden layers
• Not done: viewBox is tight to the artwork (no excess whitespace)
• Not done: xmlns attribute present
• Not done: File is optimized (see optimization reference)