The small red circular badge showing a notification count on an icon — a bell, a shopping cart, a messages icon — is one of the most recognizable UI patterns for surfacing pending items at a glance.
Customize the count and color with live controls, see it rendered on a sample icon, then copy the CSS needed to position the same badge on your own icon element using absolute positioning.
The generated CSS uses a small positioned circle anchored to the top-right corner of a relatively positioned parent, a standard and reliable technique that works consistently across icon fonts, SVG icons, and image-based icons alike.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
If you find yourself needing this often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.
Frequently asked questions
What if the count is 0 — should the badge still show?
Typically a badge is hidden entirely when the count is zero, since an empty badge signals nothing useful — you'd conditionally render the badge element only when the count is greater than zero.
Can I show 99+ instead of large numbers?
Yes, that's a common convention — cap the displayed number at a reasonable maximum like 99 and append a plus sign for anything higher, which you can implement in your own display logic before rendering the badge.