A live, editable B monogram you can download as SVG or PNG right now — plus what the shape of a B actually demands from a logo designer.
A vertical stem with two stacked bowls attached to its right — the upper one almost always slightly smaller than the lower.
Rendered in Poppins at weight 600. Drag the letter to reposition it, then download — or open it in the full editor to change everything.
The B carries two counters, and they are the first things to fail. Because the upper bowl is drawn smaller than the lower one for optical balance, the upper counter is the smaller of the two and it closes first under any downscaling. The B is also asymmetric left-to-right: all the weight is on the right side of the stem, which makes a naively centred B look like it is drifting rightward.
Shift the B one or two pixels left of geometric centre to compensate for the stem-heavy left edge. Prefer a face where the two bowls are close in size — geometric sans like Poppins and Jost draw them nearly equal — because that reads as more deliberate at icon scale than the classical stacked-and-tapered form.
A B at 16px reliably degrades into an 8 or a solid blob. If the mark has to work as a favicon, either use a very open face like Lexend, or accept the degradation and rely on colour for recognition in the tab strip.
BB works well — the repeated bowls create an obvious pattern. BA and BC are harder: the B's bowls bulge right into the neighbour's space, so you almost always need extra tracking. Avoid pairing a B with a D unless the face differentiates their bowls clearly.
Poppins draws both B bowls as near-perfect circles of similar size, which keeps the two counters equally open at small sizes. See what Poppins looks like as an icon , or swap it for any of the 900+ Google Fonts in the editor.
Geometric centring and optical centring are not the same thing. Nudge the B until it looks centred, not until the numbers say it is.
Corner radius changes the mood more than the font does. A 0% square reads as technical, 20% as an app icon, 50% as a personal avatar.
The editor's Web Icons export produces ten PNG sizes, an SVG, a favicon.ico, a manifest and the HTML to install it all.
Open the free editor, change the font, colours, corner radius and spacing, then export SVG, PNG, ICO or a complete favicon package. No account, no watermark.
Open the letter B logo editorEach letter has its own shape problems. These are the nearest neighbours of the B.