devbio
FeaturesExamplesMarketplaceToolsBlogsPricingFAQ
Sign inClaim your slug
All free tools

Tech-stack badges

Pick your stack, drag to reorder, copy as Markdown / HTML / React. We host the SVGs at /api/tools/badges/<slug>.svg so your README never breaks.

Languages

Frameworks & runtimes

Databases

Cloud & infra

Tooling

Design

Your stack (5)

  • TypeScriptTypeScript
  • ReactReact
  • Next.jsNext.js
  • Node.jsNode.js
  • PostgreSQLPostgreSQL
![TypeScript](https://devbio.me/api/tools/badges/typescript.svg) ![React](https://devbio.me/api/tools/badges/react.svg) ![Next.js](https://devbio.me/api/tools/badges/nextjs.svg) ![Node.js](https://devbio.me/api/tools/badges/nodedotjs.svg) ![PostgreSQL](https://devbio.me/api/tools/badges/postgresql.svg)

Preview

TypeScriptReactNext.jsNode.jsPostgreSQL

On this page

  • Why badges
  • vs. shields.io
  • Where to paste them
  • Pick a stack that signals
  • FAQ
Guide

Tech badges done right

Stack badges started as a way to advertise your project's dependencies. They evolved into a recruiter's shortcut, then a personality signal. This guide is about doing them well — picking the badges that say something, keeping them sharp on every device, and not turning your README into a shields.io fan-page.

Why badges

A reader skimming a README spends ~5 seconds before deciding to scroll. Badges are the first parseable signal — they answer "what is this thing made of" without forcing the reader to read prose. For a profile README, badges answer "what does this person know." They're visual sentences.

The mistake everyone makes is using badges as decoration. Twenty badges of every tech you've ever touched dilutes the signal. Pick five. Make them the five a hiring manager or a contributor most needs to know.

Stop maintaining two surfaces

Your README and your bio, one source of truth.

On devbio, your skills component renders identical badges and stays in sync with your bio — edit once, every surface updates.

devbio.me/
devbio

The developer-first bio platform.

© 2026 devbio.me

Product
ComponentsExamplesMarketplaceResume builderPricingBlogs
Free tools
All toolsOpen Graph previewerMRR calculatorUsername availabilityTech-stack badges
Company
Twitter

What's wrong with shields.io

Nothing, technically. shields.io is a heroic free service that's held READMEs together for a decade. But for stack badges specifically:

  • URL templates rot. img.shields.io/badge/React-…?style=for-the-badge&logo=react&logoColor=white&color=20232A is a string in your README that anyone editing later doesn't want to touch.
  • Rate limits. When shields.io is having a bad day, every README using it loads with broken images. Your profile looks neglected.
  • Inconsistent colours. The hex you typed isn't always the brand's actual hex — by 2026 most of these have been updated and shields.io URLs still point at old ones.

Our SVGs live at /api/tools/badges/<slug>.svg. The URL is short, the slug is human-readable, and we maintain the colours. CDN-cached for a day, served as a clean inline SVG.

Where to paste them

GitHub profile README. Top of the README, right under your name. Maximum 6 badges, ordered by recency / preference (front-end / back-end / infra).

Project README. Below the project title, before the install snippet. Include the language, the runtime, and one badge for any non-obvious dependency.

devbio. The Skills component renders the same SVGs at the same size, so if you tweak your bio's skill set, the badges update alongside. No duplicated source of truth.

Pick a stack that signals

The rule of thumb: every badge should be falsifiable. "I know React" should mean you've shipped a non-trivial React app in the last year. "I know Kubernetes" should mean you've operated a cluster, not just touched a YAML file once. Five honest badges beat ten aspirational ones.

Order matters. Lead with the language, follow with the framework, then database, then infra. This is the same mental model engineers use when describing their stack out loud — it parses faster.

FAQ

Can I customise the colours?
Not yet — we ship brand-true colours intentionally, because the most common README mistake is "cute pink Postgres badge." If demand picks up we'll add a colour override flag.
What if my favourite tech isn't in the list?
Open an issue on the devbio repo with the slug, name, hex, and source for the icon (simpleicons.org preferred). We'll add it within a release.
Will the URLs stay stable?
Yes. /api/tools/badges/<slug>.svg is part of the public API surface — once a slug ships, we don't rename it. If we ever deprecate one (say, an obsolete tech) we'll alias the old URL to a generic placeholder, not 404.
Can I host the SVGs myself?
Yes — download the SVG by visiting the URL directly, save into your repo, and reference relatively. Trade-off: you stop getting updates if we ever redesign the badge style.
GitHub
Privacy
Terms