Skip to content

Icon Maker

DesignTypography and Icons

One to three letters, digits or an emoji.

Shape
SVG code —
Contrast ratio (:1)
—
WCAG level
—
Font size (px)
—
Corner radius (px)
—
File size (bytes)
—

Type up to three letters, pick a background and letter colour in hex, choose square, rounded or circle, and the icon maker writes the SVG code. It also reports contrast: white on #2563EB scores about 5.17:1, which passes WCAG AA, while grey #777 on white is 4.48:1 and falls just short.

About this tool

Monogram icons turn up everywhere: avatar placeholders, favicons for a side project, app tiles in a mock-up, labels on a dashboard. This maker writes a small, self-contained SVG for one: a square, rounded square or circle filled with your background colour, with one to three centred characters on top. The font size scales with the number of characters so two-letter initials still fit, and corner radius follows the shape. Alongside the code you get the contrast ratio between the two colours and the WCAG level it reaches, so a pale-on-pale combination is caught before it ships. The SVG uses a system font stack, so the exact letterforms depend on the fonts installed where it is shown; convert the text to paths in a vector editor if you need identical rendering everywhere.

How to use it

  1. Type the letters

    Enter one to three characters, such as initials, a digit or an emoji.

  2. Set the colours

    Give the background and letter colours as hex codes; three-digit shorthand like #FFF works too.

  3. Pick shape and size

    Choose square, rounded or circle and set the canvas size in pixels, from 16 to 1024.

  4. Copy the SVG

    Copy the code into an .svg file or paste it inline in HTML; check the contrast figure first.

Examples

Black A on a white square

Icon letters
A
Background colour
#FFFFFF
Letter colour
#000000
Shape
Square
Size
512

Result SVG code: <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect width="512" height="512" rx="0" fill="#FFFFFF"/><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-weight="700" font-size="282" fill="#000000">A</text></svg>
Contrast ratio (:1): 21
WCAG level: AAA
Font size (px): 282
Corner radius (px): 0
File size (bytes): 312

  1. Background #FFFFFF has relative luminance 1; text #000000 has 0.
  2. Contrast = (1 + 0.05) ÷ (0 + 0.05) = 21:1 (AAA).
  3. Font size = 512 px × 0.55 for 1 character(s) = 282 px; corner radius = 0 px.

The highest contrast possible, 21:1, and a single letter set at 55% of the 512 px canvas.

Grey initials in a white circle

Icon letters
JD
Background colour
#FFFFFF
Letter colour
#777
Shape
Circle
Size
256

Result SVG code: <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><rect width="256" height="256" rx="128" fill="#FFFFFF"/><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-weight="700" font-size="108" fill="#777777">JD</text></svg>
Contrast ratio (:1): 4.48
WCAG level: AA large text only
Font size (px): 108
Corner radius (px): 128
File size (bytes): 315

  1. Background #FFFFFF has relative luminance 1; text #777777 has 0.1845.
  2. Contrast = (1 + 0.05) ÷ (0.1845 + 0.05) = 4.48:1 (AA large text only).
  3. Font size = 256 px × 0.42 for 2 character(s) = 108 px; corner radius = 128 px.

#777 looks dark enough, yet at 4.48:1 it misses AA for normal text by a hair.

White AB on a rounded blue tile

Icon letters
AB
Background colour
#2563EB
Letter colour
#FFFFFF
Shape
Rounded
Size
512

Result SVG code: <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect width="512" height="512" rx="102" fill="#2563EB"/><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-weight="700" font-size="215" fill="#FFFFFF">AB</text></svg>
Contrast ratio (:1): 5.17
WCAG level: AA
Font size (px): 215
Corner radius (px): 102
File size (bytes): 315

  1. Background #2563EB has relative luminance 0.1532; text #FFFFFF has 1.
  2. Contrast = (1 + 0.05) ÷ (0.1532 + 0.05) = 5.17:1 (AA).
  3. Font size = 512 px × 0.42 for 2 character(s) = 215 px; corner radius = 102 px.

A typical app-style monogram: rounded corners at 20% of the side and two letters at 42% height.

How it is calculated

contrast = (L1 + 0.05) ÷ (L2 + 0.05); L = 0.2126 R + 0.7152 G + 0.0722 B on linearised sRGB

L1
relative luminance of the lighter colour
L2
relative luminance of the darker colour
R, G, B
each channel divided by 255, then linearised: c ÷ 12.92 up to 0.04045, else ((c + 0.055) ÷ 1.055)^2.4

Contrast follows the WCAG 2.x relative-luminance definition. A ratio of 7:1 or more is AAA, 4.5:1 is AA for normal text, and 3:1 is AA for large text only. For the icon geometry, font size is 55% of the side for one character, 42% for two and 32% for three, and the corner radius is 0, 20% or 50% of the side for square, rounded and circle.

When not to use it

  • Detailed pictograms or logos need a vector editor, not a letter tile.
  • Favicons that must be .ico or PNG need a separate export from the SVG.
  • Brand marks that require an exact typeface should use outlined paths.

Common mistakes

  • Typing a colour name like blue instead of a hex code.
  • Picking light text on a mid-tone background that scores under 4.5:1.
  • Using four-letter labels, which become unreadable at favicon sizes.

Frequently asked questions

Can I use the SVG as a favicon?

Modern Chrome, Firefox and Edge accept an SVG favicon through a link tag with type image/svg+xml. Safari and older browsers still expect a PNG or ICO, so keep a raster fallback for those.

Why do the letters look different on another computer?

The text element uses the font stack Inter, Arial, sans-serif, so it renders with whichever of those is installed. For pixel-identical output, open the file in a vector editor and convert the text to outlines.

What contrast ratio is good enough for an icon?

WCAG asks for 3:1 for graphical objects and large text, and 4.5:1 for normal-size text. Small monograms in a list behave like normal text, so 4.5:1 is the safer target.

Does an emoji work as the label?

Yes, an emoji counts as one character even when it is built from several code points. It is drawn with the viewer's emoji font, so its colour ignores the letter colour setting.

How is the font size chosen?

It is a fixed share of the canvas side: 55% for a single character, 42% for two and 32% for three. On a 512 px icon that gives 282, 215 and 164 px.

Why is the file so small?

The icon is one rectangle and one text element with no embedded fonts or images, so a typical result is around 400 bytes, smaller than almost any PNG of the same size.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 28). Icon Maker. Tools Directory. Retrieved October 28, 2026, from https://tools.milunir.com/design/typography-and-icons/icon-maker/

MLA

Tools Directory Editorial Team. “Icon Maker.” Tools Directory, 28 Oct. 2026, https://tools.milunir.com/design/typography-and-icons/icon-maker/. Accessed 28 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Icon Maker.” Tools Directory. Last modified October 28, 2026. Accessed October 28, 2026. https://tools.milunir.com/design/typography-and-icons/icon-maker/.

Link<a href="https://tools.milunir.com/design/typography-and-icons/icon-maker/">Icon Maker – Tools Directory</a>