CS2 badges are the visual trophies earned through Counter-Strike 2 — Service Medals awarded at Rank 40, profile badges that unlock as you level up your Steam XP, and commendations earned through consistent positive play. Once you start collecting them, the next step many developers take is to show those accomplishments on a portfolio README, a personal site, or a team documentation page. A static Shields.io badge turns a one-line statement like "Service Medal 2026" or "Rank 40" into something that scans at a glance. The catch is that the URL behind that badge separates the label, the message, and the color with literal dashes, encodes spaces as underscores, and doubles dashes or underscores that should appear in the visible text. The full path syntax is documented in the Shields.io static badge reference. Badge Generator turns those rules into a focused form so you can build a CS2 badge URL, Markdown snippet, and HTML image tag without memorizing any path escapes. It runs entirely in your browser, validates color and logo input, and lets you compare the live preview with the generated code before copying anything.
CS2 Achievements That Translate Well to Static Badges
Not every CS2 reward makes sense as a README badge. Static badges are best reserved for labels you can stand behind permanently without needing live updates. The categories below map cleanly to short, stable statements that readers can recognize at a glance.
- Service Medal — The annual prestige medal awarded once you reach Rank 40 in matchmaking. The medal name and year stay fixed once unlocked, which makes the label easy to maintain across seasons.
- Profile level — Granted as you gain Steam XP from matches and purchases. A single profile-level badge works as a milestone; live level changes do not belong in a static statement.
- Commendations — Reputation medals given by teammates for behavior, communication, teaching, and leadership. The commendation category name (Teacher, Friendly, Leader) is stable enough to advertise.
- Event mission rewards — Seasonal badges granted after completing limited-time operations or missions. These have fixed names you can publish with pride when you finish an operation.
Plan a Short Label and a Concise Message
The label appears on the left side of the badge and the message on the right. Keep both short enough to fit on one line at typical README width, because a long message gets clipped or wraps in unpredictable ways on mobile screens.
For CS2 achievements, label candidates that read well include:
- Service Medal — message like 2026 or Rank 40
- Profile — message like Level 100 or Lvl 40
- Commendation — message like Teacher or Friendly
- Achievement — message like Master Guardian for a stable rank milestone
- Operation — message like Broken Fang for a completed operation
Pick a badge color that matches the achievement's tone. Greens and blues read as positive, oranges and reds as warnings, greys as neutral information. The tool accepts a compact named form such as blue, brightgreen, or inactive, or a three- and six-digit hexadecimal value with or without a leading hash. A separate label color lets you tint the left side if you want extra emphasis on the achievement category.
Build a CS2 Badge in Four Steps
Open the Badge Generator and work through the following sequence. Each input updates the live Shields.io preview immediately, which means you can compare the rendered result with the generated code before copying.
- Enter a short label and the message. For a 2026 Service Medal, use the label Service Medal and the message 2026. Spaces are encoded as underscores in the URL, and literal dashes or underscores inside the visible text are doubled so they are not mistaken for the separator between badge parts.
- Choose the badge color, an optional label color, and a supported style. Pick a named color like blue or brightgreen, or enter a hexadecimal value such as 2a475e. Select a style — flat, flat-square, plastic, or for-the-badge — to match the visual feel of your README.
- Optionally add a Simple Icons slug. If you want a small Counter-Strike logo next to the label, enter the slug and confirm the preview still renders. Slugs must look like Simple Icons identifiers, and the generator rejects malformed input before it reaches the URL.
- Copy the image URL, Markdown, or HTML. The direct image URL works for systems that accept a remote badge image. The Markdown snippet is ready to paste into a GitHub or GitLab README, issue template, or documentation file. The HTML version supplies an escaped alt attribute and image source for sites that accept markup.
Pick the Right Output Format for the Destination
Badge Generator returns three formats from the same canonical URL. The right pick depends on where the badge will live and how the surrounding system handles remote images.
| Format | Best for | What you get |
|---|---|---|
| Direct image URL | Platforms that accept a remote image, custom backends, dashboards, or static site generators | An img.shields.io URL that returns an SVG when requested |
| Markdown | GitHub or GitLab READMEs, issue templates, release notes, project documentation | An image link wrapped in Markdown so the badge renders inline with surrounding text |
| HTML | Web pages and CMS entries that accept markup | An escaped <img> tag with a literal alt attribute for screen readers |
For most developer profiles, Markdown is the simplest fit. Use HTML when you need to control the alt text, wrap the badge in a link, or apply CSS to the image. Use the direct image URL when the destination does not parse Markdown or HTML and only accepts a remote image source.
Honest Limits of a Static CS2 Badge
A static badge describes, it does not prove. Writing "passing" or "Rank 40" inside the message field does not verify that your account actually holds that rank at the moment someone reads it. The Shields.io badge is a rendered SVG image that reflects only the text you typed into the form.
Two practical consequences follow.
- Static labels only. Use static badges for stable statements you are prepared to maintain — completed operations, milestone profile levels, or representative ranks. For data that needs to track live matchmaking rank or a current profile level, point a CI workflow or registry badge at the relevant endpoint instead.
- Color must not carry the meaning alone. A red badge for a Service Medal would be confusing, but more importantly, color-blind readers rely on the visible text. Always include surrounding prose or a meaningful alt attribute so the context is clear even when color is ignored or stripped.
Validation in Badge Generator is strict around ambiguous or unsafe input. Labels and messages must contain visible text, stay within a practical length limit, and cannot include control characters. Colors accept a compact named form or three- and six-digit hexadecimal values, with an optional leading hash removed before the URL is built. Logo values must look like Simple Icons slugs. These checks catch common typing mistakes without claiming to validate every named color or logo that exists on an external service.
Test the Rendered Destination Before You Commit
Preview several styles at the size where the badge will actually appear. A flat-square badge looks crisp on a dense dashboard, while for-the-badge makes a stronger statement on a portfolio header. The Shields.io preview in the tool loads from the public Shields.io service, so the network request goes to that provider — your form data never leaves the browser to Lizely.
If a logo does not appear, verify its slug against the current Simple Icons catalog; the generator only checks shape, not whether the slug still exists. If your target platform proxies remote images, changes may be cached outside the tool, so plan a hard refresh when iterating on color or label. Paste the Markdown into a test branch, render the README, and confirm the alt text reads naturally before you merge.
Putting It Together
For predictable CS2 badges, the recipe is simple: choose a short label that names the achievement, write a concise message that says what you want readers to know, pick a color that matches the tone, copy the Markdown or HTML from Badge Generator, and preview the result where it will actually live. The form handles the path escapes, query parameters, and logo encoding so you can stay focused on what the badge says about your time in CS2. Static badges are a clean way to advertise a milestone; when the underlying fact changes often, swap to a CI or endpoint badge that can read the live data.
Related reading: Show Phasmophobia Badges as a README Badge.