What characters can I stamp onto an icon?

Uppercase letters A-Z, digits 0-9, and spaces are supported via a built-in bitmap font. Lowercase letters are automatically uppercased; other characters (punctuation, accented letters, non-Latin scripts) are skipped but still reserve their column width so spacing stays consistent.

Can I use a system or custom font?

No. Because the underlying function runs without a DOM (so it can be unit tested in plain JavaScript), it rasterizes text using a hand-authored 5x7 pixel font rather than relying on canvas text rendering or any installed font.

How do I position the text precisely?

Enter the x and y pixel coordinates for where the top-left of the text should start, and use the scale input to make each font pixel bigger or smaller (a scale of 2 doubles every glyph pixel to a 2x2 block).

Does adding text resize the icon?

No. The canvas stays the same size as the uploaded icon; text is drawn onto the existing pixels, so make sure your x/y/scale values keep the text within bounds if you want it fully visible.

Icon Text Adder - Stamp Text onto a PNG Icon

Overview

Introduction

This tool stamps a line of text directly onto a PNG icon's pixels, entirely in your browser, using a built-in bitmap font rather than any system font.

It's a focused, icon-labeled wrapper around the site's general-purpose PNG text tool.

What Is Icon Text Adder?

A client-side icon labeling tool that decodes an uploaded icon's pixel data and draws each character of your text as a small grid of colored pixels at the position, scale, and color you choose.

The font covers uppercase A-Z, digits 0-9, and spaces; anything else is skipped but still advances the cursor so spacing stays even.

How Icon Text Adder Works

For each character, the tool looks up its shape in a hand-authored 5x7 grid of filled/empty cells, then paints each filled cell as a scale-by-scale block of pixels directly into the icon's pixel buffer at the current cursor position, advancing the cursor by the glyph width (plus 1px spacing) times the scale after every character.

Because this runs as a pure function on a plain pixel array, it works identically in a test environment and in the browser — only the surrounding component touches an actual canvas to decode the upload and encode the download.

When To Use Icon Text Adder

Use it to add a short label, version number, or watermark-style text directly onto an icon's pixels, or to overlay a badge (like "NEW" or "V2") onto an existing graphic.

It's best for short, all-caps-friendly labels rather than long sentences, given the font's limited character set.

Often used alongside Text to Icon Converter, Icon Border Adder and PNG Rotator.

Features

Advantages

Runs entirely client-side; your icon is never uploaded to a server.
Deterministic, pixel-exact text placement with full control over position, scale, and color.
Works identically under automated testing since the text rendering has no DOM dependency.

Limitations

Only uppercase A-Z, 0-9, and spaces are supported; lowercase is auto-uppercased and all other characters are silently skipped.
There's no automatic line wrapping or centering — you must compute x/y coordinates yourself to position text where you want it.

Examples

Add a small label to the corner of an icon

Input

64x64 PNG icon, text 'NEW', x=2, y=2, scale=1, color red

Output

The same 64x64 PNG with a small red 'NEW' stamped in the top-left corner

At scale 1, the 3-character label occupies about 18 pixels of width starting at x=2.

Stamp a large centered version number

Input

128x128 PNG icon, text 'V2', x=40, y=60, scale=4, color white

Output

The same 128x128 PNG with a large white 'V2' stamped near the middle

Scale 4 makes each font pixel a 4x4 block, producing a much larger, more legible label.

Best Practices & Notes

Best Practices

Preview the result before downloading and nudge the x/y coordinates until the text lands where you expect, since there's no live text-fitting guide.
Choose a text color that contrasts strongly with the icon's existing colors at the stamp location.

Developer Notes

This lib file is a thin wrapper: it re-exports the pure addTextToPng function from png-text-adder.ts (the shipped 'PNG Text Adder' tool) under the icon-specific name addTextToIcon, since an icon is just a PNG once uploaded and the bitmap-font rasterization doesn't need to be re-derived for a different subject noun.

Icon Text Adder Use Cases

Labeling a batch of icon variants with short identifiers
Adding a simple 'NEW' or version badge to an icon
Watermarking an icon asset with initials or a short code

Common Mistakes

Entering x/y coordinates that push the text partly or fully outside the icon's bounds, where it gets silently clipped.
Expecting lowercase or punctuation to render — only uppercase letters, digits, and spaces have a defined glyph.

Tips

Use Text to Icon Converter instead if you want a brand-new icon made entirely of text rather than text stamped onto an existing image.
Increase scale for small icons where a scale-1 label would be nearly unreadable.

Icon Text Adder