Free Logo Construction Grid Generator
Construct logos on a logo construction grid instantly with our 100% free generator. Draw diagonals, medians and three circles in the 6:4:3 harmonic ratio, plus an optional golden circle, over any image, then export SVG to take into your design app in seconds. No signup, no downloads needed. Trusted by 60,000+ artists worldwide.
Circles and divisions to build a mark on
A construction grid of circles and straight divisions of the kind used to set out and later document a logotype — the geometry that shows a mark was constructed rather than drawn freehand.
3 controls, not a fixed picture
Set grid divisions, toggle construction circles and golden circle. Every one is live on the canvas.
Stacks with layout & design
Overlays combine, each carrying its own transform, so this one can sit under or over modular grid, baseline grid and modulor, and 11 more in the same set.
The construction as documentation
SVG export gives the construction as paths for a brand-guidelines page. Raster to 600 DPI for print documentation.
| Ctrl + Z | Undo |
| Ctrl + Y | Redo |
| Esc | Deselect overlay |
| Alt + drag | Free positioning (no snap) |
| Ctrl + scroll | Zoom canvas |
| Ctrl + P | |
| ? | Show this help |
The grid a mark gets refined against rather than designed on: a divided square, its diagonals and medians, and three circles whose radii sit in the oldest ratio in design.
The logo construction grid draws one of the 82 composition overlays in Grid Maker Pro, and the rest stack on the same image.
- 6:4:3 circle radii
- 1/φ golden diameter
- SVG + 600 DPI export
- Nothing uploaded
What is a logo construction grid?
The logo construction grid is a free browser tool that draws a square field divided from 6 to 24 ways. It adds both diagonals, both medians, three concentric construction circles at radii of one half, one third and one quarter of the side, and an optional golden circle whose diameter is exactly 1/φ of the side. It draws over your own mark, exports SVG and raster to 600 DPI, and never uploads anything.
How to use the logo construction grid
Construction circles and divisions under a mark, so the curves resolve to real centres and the proportions are ones you can defend in a specification.
Draw the mark first
This grid is for refinement, not generation. A logo designed on a grid from the first stroke tends to come out looking like a grid exercise; one drawn freely and then tested against a grid keeps its character.
JPG · PNG · GIF · WEBP
Set the divisions to match the mark
Six to twenty-four. Choose the count so that the mark's own significant edges have a chance of landing on a line — a mark with three main elements wants a divisor of three.
Grid divisions · Construction circles
Check the curves against the circles, then export
The three concentric circles are what curves get tested against. A curve that nearly matches one is usually meant to match it. Export SVG or a raster up to 600 DPI.
PNG · JPG · PDF · SVG · up to 600 DPI
Three steps, about a minute. No signup, no upload.
What the Logo Construction Grid does
A square, divided
A logo construction grid divides its square six to twenty-four ways. The square is the field a mark is designed to sit in — most identity systems specify one — and the divisions are what its edges are checked against.
Diagonals and medians, always
Four lines that are not optional, because they carry the square's own symmetry. A mark that is meant to be symmetric and is not shows up against these before it shows up anywhere else.
Circles at 6:4:3
Radii of one half, one third and one quarter of the side — a ratio of 6:4:3, which is the harmonic series and the same relationship as the octave, fifth and fourth in music.
A golden circle
Its radius is the side divided by 2φ, so its diameter is exactly 0.618 of the side — the golden section of the square. Optional, and worth turning off as often as on.
Over your own mark
The grid is a test, not a template. Laying it over a mark you have already drawn tells you which alignments were intended, which were accidental, and which are two units out.
Vector out
SVG keeps every line and circle editable, so the construction goes into Illustrator, Affinity or Figma as a guide layer under the mark. Raster export runs to 600 DPI.
Logo construction grid examples: four ways the construction grid reads
Logo construction grid vs an Illustrator logo grid template vs drawing guides by hand
| Option | Divisions adjustable | Construction circles | Vector export | Cost |
|---|---|---|---|---|
| Grid Maker Prothis tool | 6 to 24 | Three harmonic plus a golden one | SVG + raster to 600 DPI | Free |
| An Illustrator logo grid template | Fixed per file | Usually | Yes | Free to paid |
| Drawing guides by hand | Any | Any | Yes | Time |
| A grid plugin | Yes | Sometimes | Yes | Subscription |
Who a logo construction grid is for: marks that get reproduced
How a logo construction grid works — Logo grids: what they are for, and the honest version of the golden-ratio claim
Logo construction grids are the most photographed and least understood of the 82 composition overlays. They are genuinely useful, and almost every viral example of one is doing something other than what it appears to be doing.
Start with the useful version. A construction grid is a set of geometric references laid under a mark so that its alignments, its curves and its spacing can be checked rather than judged.
The checks it performs are specific. Does this edge line up with that one, or is it two units out. Is this curve a true arc or a slightly wobbly one. Are these two counters the same size. Is the mark actually symmetric where it claims to be.
Every one of those is a question the eye answers badly on its own and answers instantly against a reference. A vertical two units off centre is invisible alone and glaring on a grid, and it is exactly the kind of error that makes a mark feel unresolved without anyone being able to say why.
The three circles
The three concentric circles here are for the curve questions. Their radii are one half, one third and one quarter of the square's side — a ratio of 6:4:3, which is the harmonic series, the same relationship as the octave, the perfect fifth and the perfect fourth.
That is not a mystical claim. It is that three circles in a simple whole-number ratio give you three curves that relate to each other in a way the eye reads as ordered, and a mark whose curves sit on two of them will read as more coherent than one whose curves sit at arbitrary radii.
The golden circle is separate and switchable, and its arithmetic is exact: radius equals the side divided by 2φ, so the diameter is 0.61803 of the side — the golden section of the square's edge, and 1/φ of the outer circle's diameter.
The golden-ratio logo claims
Whether that is worth anything is the contested part, and this is where the honest version of the story has to be told.
The famous golden-ratio logo constructions circulating online — the ones showing a well-known mark overlaid with a Fibonacci spiral or a stack of tangent circles — are, in the overwhelming majority of cases, retrofitted. The mark was drawn first and the circles were fitted afterwards, often loosely.
The golden ratio generator draws that ratio honestly, and the icon grid tool is the tool for a set rather than a single mark. The Apple logo is the canonical example. The widely shared circle construction does not match the actual outline closely, and no evidence has emerged that Rob Janoff used it. He has said in interviews that he did not.
The Twitter bird construction had a similar life. The published grid of overlapping circles came out after the mark, as a way of explaining and standardising it, not as the method of drawing it.
This matters practically rather than pedantically, because it changes what the grid is for. If construction circles produced good marks, you would design on them. They do not, and what they actually do is help you refine and document a mark you drew some other way.
Draw first, then test
That is the sequence worth adopting: draw freely, then test against the grid, then adjust the near-misses. A mark designed on a grid from the first stroke usually looks like what it is — a geometry exercise, technically clean and characterless.
The exception is a mark whose whole idea is geometric. A monogram built from a circle and two straight lines, a logotype constructed from a single stroke width, a symbol that is explicitly a piece of geometry — those genuinely are designed on a grid, and the grid is the design.
Construction grids as documentation
The documentation use is the other real one, and it is under-appreciated. A brand guideline has to tell someone who is not you how to reproduce a mark, and "reproduce it from the artwork" is not always enough — reconstructions, embroidery, signage and engraving all need the geometry.
A construction grid in a guideline is a specification. It says this arc has this radius, this stem is this many units wide, this gap is this many units. Whether or not it was the method, it becomes the definition.
The fixed lines, and the division count
The four fixed lines — both diagonals, both medians — are drawn unconditionally because they are the square's own symmetry and they are the fastest test available. Almost every mark is symmetric about at least one axis, and a mark that is nearly symmetric is worse than one that is deliberately not.
The division count is the setting that repays thought. Choose it so that the mark's own significant divisions have a chance of landing on lines: a mark with three main elements wants a count divisible by three, one built on halves wants a power of two.
Twelve, the default, is a reasonable general answer because it divides by 2, 3, 4 and 6, so it accommodates halves, thirds, quarters and sixths from one setting. Twenty-four gives the same divisibility at twice the resolution.
Six or eight is right for a mark with few elements, where a fine grid produces coincidences — with enough lines, everything lands near something, and a coincidence found on a 24-division grid is usually not evidence of anything.
What this grid is the wrong tool for
That is the standing risk with construction grids and it applies to the circles as much as the lines. A dense enough reference will pass through part of any mark, so the discipline is to decide what you are testing before you look rather than to hunt for alignments afterwards.
For clearspace and lockup work this grid is the wrong tool — those want the mark's own bounding geometry repeated as a margin, not a divided square. It is worth knowing that the four types of logo grid do different jobs and this one is the construction type.
The square field sits at 74% of the canvas's short side, so it has a margin in the working view. That is a presentation choice rather than part of the system.
The grid draws over your own mark rather than exporting a fixed template because testing is the use. A blank construction grid is a piece of geometry; the same grid over a logo is a diagnosis.
The export sizes itself from the paper format and the DPI you choose rather than from your screen. SVG keeps every line and circle editable, which is what you want when the construction becomes a guide layer or a page in a brand guideline. The logo construction overlay page works through the famous examples, beside the rest of the design template category.
Everything runs in your browser. Images you load are never uploaded, because there is no server for them to reach. The drawing, the transform and the export all happen on your own machine.
Where a logo construction grid gets used
Draw freely, then test, then fix the near-misses. A mark designed on a grid from the first stroke looks like a geometry exercise.
In a guideline the construction is the specification. Whether or not it was the method, it becomes the definition.
Decide what you are testing before you look. With enough lines everything lands near something.
Logo construction grid: frequently asked questions
The geometry
What is a construction grid actually checking?
Specific things the eye judges badly alone: whether an edge lines up with another or is two units out, whether a curve is a true arc, whether two counters match, whether a mark is symmetric where it claims to be. A vertical two units off centre is invisible alone and glaring on a grid.
Why are the circle radii a half, a third and a quarter?
That is a ratio of 6:4:3 — the harmonic series, the same relationship as the octave, fifth and fourth. Three circles in simple whole-number ratio give three curves the eye reads as ordered, so a mark whose curves sit on two of them reads as more coherent than one at arbitrary radii.
What is the golden circle?
Its radius is the side divided by 2φ, so its diameter is exactly 0.61803 of the square's side — the golden section of the edge, and 1/φ of the outer circle's diameter. It is optional and worth turning off as often as on.
Are the famous golden-ratio logo constructions real?
Overwhelmingly they are retrofitted. The Apple circle construction does not match the actual outline closely and Rob Janoff has said he did not use it. The Twitter bird's published circle grid came out after the mark, as a way of standardising it rather than as the method of drawing it.
So should I design on the grid or not?
Draw freely, then test against the grid, then adjust the near-misses. A mark designed on a grid from the first stroke usually looks like what it is — technically clean and characterless. The exception is a mark whose whole idea is geometric, where the grid genuinely is the design.
Is there a use beyond refinement?
Documentation, and it is under-appreciated. A brand guideline has to tell someone who is not you how to reproduce a mark, and reconstruction, embroidery, signage and engraving all need the geometry. In a guideline the construction becomes the specification whether or not it was the method.
Why not just use the maximum?
Because a dense reference passes through part of any mark. With 24 divisions everything lands near something, and an alignment found by hunting is usually not evidence of anything. Decide what you are testing before you look.
Is this the right grid for clearspace or lockups?
No. Those want the mark's own bounding geometry repeated as a margin, not a divided square. The four types of logo grid — base, construction, lockup and clearspace — do different jobs, and this is the construction type.
Using it
How many divisions should I use?
Enough divisions that the mark's own significant edges land on lines. A mark with three main elements wants a count divisible by three; one built on halves wants a power of two. Twelve is a good general answer because it divides by 2, 3, 4 and 6.
How do I fit the field to a mark I already have?
Scale the overlay so the square field sits on the mark's intended bounding box, then look at what the circles do. A mark drawn on construction circles will have curves that agree with one of the three radii; a mark that was not will show it immediately, and that is the whole audit.
Should the construction circles be on while I refine?
One at a time. Three concentric circles plus both diagonals, both medians and a divided field is a great deal of line over a small mark — turn on the circle whose radius your curves are near, work against that, and bring the others back only when you need them.
Export and print
Can I export the construction into Illustrator?
Export SVG and lock it as a template layer. The circles arrive as real circles and the divisions as real lines, so you can snap to them — which is the point, and is exactly what a screenshot of a grid cannot give you.
What do I include in a brand guidelines document?
The composite — the mark with its construction over it — as a raster at 300 DPI. A guidelines page is showing how the mark is built, so the mark has to be in the picture; the grid alone is only useful to whoever is drawing.
Choosing a grid
Should I use this or the icon grid?
This for a logo, the icon grid generator for a UI icon set. A logo is one mark refined against circles and diagonals; icons are many marks that have to look the same size as each other, which is what keylines and a live area solve. Different problems that look alike.
Practical matters
Does anything I load get uploaded?
No. There is no server to upload to. The image is read by your browser, the grid is drawn on your machine, and the export is generated locally.
Are the famous golden-ratio logo constructions genuine?
Mostly not, and it is worth being clear about it. The well-known circle diagrams over Apple, Twitter and Pepsi were made after the fact by other people, and the marks were not designed that way. The grid is useful for refining curves you have already drawn — not as evidence that a good mark must be built on φ.
Open the tool Logo construction grid
Draw first, then test
A logo construction grid draws circles in harmonic ratio, with a golden one that switches off. Export vector or 600 DPI. No signup, nothing uploaded.
Back to the generator →