Pure CSSMIT licensed

Morph Icon

Compact icon-only tabs that expand on activation: the label morphs in via a max-width transition, smoothly widening the active tab inline. Pure CSS, no positional JS.

Published May 7, 2026

Live Demo

Try it

The code

<div class="tt30">
  <nav class="tt30n">
    <input type="radio" name="tt30" id="tt30-r1" checked />
    <label class="tt30b" for="tt30-r1">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 12l9-9 9 9M5 10v10h14V10" />
      </svg>
      <span class="tt30l">Home</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r2" />
    <label class="tt30b" for="tt30-r2">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <path d="M21 21l-5-5" />
      </svg>
      <span class="tt30l">Search</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r3" />
    <label class="tt30b" for="tt30-r3">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M3 8h18M3 14h18M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
        />
      </svg>
      <span class="tt30l">Inbox</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r4" />
    <label class="tt30b" for="tt30-r4">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt30l">Profile</span>
    </label>
  </nav>
</div>

<div class="tt30">
  <nav class="tt30n">
    <input type="radio" name="tt30" id="tt30-r1" checked />
    <label class="tt30b" for="tt30-r1">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 12l9-9 9 9M5 10v10h14V10" />
      </svg>
      <span class="tt30l">Home</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r2" />
    <label class="tt30b" for="tt30-r2">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <path d="M21 21l-5-5" />
      </svg>
      <span class="tt30l">Search</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r3" />
    <label class="tt30b" for="tt30-r3">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M3 8h18M3 14h18M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
        />
      </svg>
      <span class="tt30l">Inbox</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r4" />
    <label class="tt30b" for="tt30-r4">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt30l">Profile</span>
    </label>
  </nav>
</div>

.tt30 {
  background: #fdf6e9;
  padding: 32px 18px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt30n {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(212, 67, 127, 0.12);
  min-width: 0;
}

.tt30n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tt30b {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: #94748a;
  transition: background 0.3s, color 0.3s, gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
}

.tt30b:hover {
  color: #d4437f;
}

.tt30i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tt30l {
  font: 700 12px/1 ui-sans-serif, system-ui;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.tt30n input:checked + .tt30b {
  background: #d4437f;
  color: #fff;
  gap: 8px;
}

.tt30n input:checked + .tt30b .tt30l {
  max-width: 120px;
  opacity: 1;
}

.tt30n input:focus-visible + .tt30b {
  outline: 2px dashed #d4437f;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tt30b,
    .tt30l {
    transition: none;
  }
}

.tt30 {
  background: #fdf6e9;
  padding: 32px 18px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt30n {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(212, 67, 127, 0.12);
  min-width: 0;
}

.tt30n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tt30b {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: #94748a;
  transition: background 0.3s, color 0.3s, gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
}

.tt30b:hover {
  color: #d4437f;
}

.tt30i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tt30l {
  font: 700 12px/1 ui-sans-serif, system-ui;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.tt30n input:checked + .tt30b {
  background: #d4437f;
  color: #fff;
  gap: 8px;
}

.tt30n input:checked + .tt30b .tt30l {
  max-width: 120px;
  opacity: 1;
}

.tt30n input:focus-visible + .tt30b {
  outline: 2px dashed #d4437f;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tt30b,
    .tt30l {
    transition: none;
  }
}

Here's a working CSS Tab Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Morph Icon
Source: https://codefronts.com/navigation/css-tabs/morph-icon/

Compact icon-only tabs that expand on activation: the label morphs in via a max-width transition, smoothly widening the active tab inline. Pure CSS, no positional JS.
## HTML
```html
<div class="tt30">
  <nav class="tt30n">
    <input type="radio" name="tt30" id="tt30-r1" checked />
    <label class="tt30b" for="tt30-r1">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 12l9-9 9 9M5 10v10h14V10" />
      </svg>
      <span class="tt30l">Home</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r2" />
    <label class="tt30b" for="tt30-r2">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <path d="M21 21l-5-5" />
      </svg>
      <span class="tt30l">Search</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r3" />
    <label class="tt30b" for="tt30-r3">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M3 8h18M3 14h18M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
        />
      </svg>
      <span class="tt30l">Inbox</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r4" />
    <label class="tt30b" for="tt30-r4">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt30l">Profile</span>
    </label>
  </nav>
</div>
```
## CSS
```css
.tt30 {
  background: #fdf6e9;
  padding: 32px 18px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt30n {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(212, 67, 127, 0.12);
  min-width: 0;
}

.tt30n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tt30b {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: #94748a;
  transition: background 0.3s, color 0.3s, gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
}

.tt30b:hover {
  color: #d4437f;
}

.tt30i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tt30l {
  font: 700 12px/1 ui-sans-serif, system-ui;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.tt30n input:checked + .tt30b {
  background: #d4437f;
  color: #fff;
  gap: 8px;
}

.tt30n input:checked + .tt30b .tt30l {
  max-width: 120px;
  opacity: 1;
}

.tt30n input:focus-visible + .tt30b {
  outline: 2px dashed #d4437f;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tt30b,
    .tt30l {
    transition: none;
  }
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Tab Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Morph Icon
Source: https://codefronts.com/navigation/css-tabs/morph-icon/

Compact icon-only tabs that expand on activation: the label morphs in via a max-width transition, smoothly widening the active tab inline. Pure CSS, no positional JS.
## HTML
```html
<div class="tt30">
  <nav class="tt30n">
    <input type="radio" name="tt30" id="tt30-r1" checked />
    <label class="tt30b" for="tt30-r1">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 12l9-9 9 9M5 10v10h14V10" />
      </svg>
      <span class="tt30l">Home</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r2" />
    <label class="tt30b" for="tt30-r2">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <path d="M21 21l-5-5" />
      </svg>
      <span class="tt30l">Search</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r3" />
    <label class="tt30b" for="tt30-r3">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M3 8h18M3 14h18M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
        />
      </svg>
      <span class="tt30l">Inbox</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r4" />
    <label class="tt30b" for="tt30-r4">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt30l">Profile</span>
    </label>
  </nav>
</div>
```
## CSS
```css
.tt30 {
  background: #fdf6e9;
  padding: 32px 18px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt30n {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(212, 67, 127, 0.12);
  min-width: 0;
}

.tt30n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tt30b {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: #94748a;
  transition: background 0.3s, color 0.3s, gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
}

.tt30b:hover {
  color: #d4437f;
}

.tt30i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tt30l {
  font: 700 12px/1 ui-sans-serif, system-ui;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.tt30n input:checked + .tt30b {
  background: #d4437f;
  color: #fff;
  gap: 8px;
}

.tt30n input:checked + .tt30b .tt30l {
  max-width: 120px;
  opacity: 1;
}

.tt30n input:focus-visible + .tt30b {
  outline: 2px dashed #d4437f;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tt30b,
    .tt30l {
    transition: none;
  }
}
```

How this works

The .tt30 demo is the compact toolbar idiom Figma and VS Code use on their activity bars: four icon-only tabs collapsed into a rounded pill, where the active tab morphs open to reveal its label inline instead of a separate tooltip. The container .tt30n is a flex row on a #fff pill with border-radius: 999px and a 6px inner padding, sitting on a warm cream #fdf6e9 canvas. Radios are hidden absolutely with opacity: 0, and their labels carry the click surface.

Each .tt30b label is a flex row of .tt30i SVG plus .tt30l text span. The magic is on the label span: max-width: 0; opacity: 0; overflow: hidden collapse it to nothing while the icon-only tab is inactive, and the parent's gap: 0 keeps the pill exactly icon-width. On .tt30n input:checked + .tt30b, three things unlock in one motion: the tab background fills with the accent #d4437f and text turns white, the parent gap animates from 0 to 8px, and the label's max-width expands from 0 to 120px while opacity rides from 0 to 1. The gap transition uses 0.4s cubic-bezier(0.4, 0, 0.2, 1), matched exactly on the label's max-width so both sides of the reveal glide together.

Because max-width is a real animatable property and no positional JS runs, the whole reveal stays hand-coded pure CSS, framework-agnostic, copy-paste ready with no dependencies, and INP-safe. Icons are inline SVGs with stroke: currentColor, so they inherit the label color transitions cleanly on active and hover states without a second color rule. Focus rings use a 2px dashed #d4437f outline offset by 3px so keyboard users see the accent even before selecting. The prefers-reduced-motion block strips the transitions to none, giving vestibular users instant snaps between icon-only and icon-plus-label states. SSR-safe because the checked attribute renders directly into markup.

Make it yours

Change the accent #d4437f everywhere it appears (active background, focus outline, hover color, shadow tint at 0.12 alpha); the warm cream #fdf6e9 canvas pairs with rose but also with teal #0d9488 or violet #7c3aed.
Retune the label-reveal speed by editing the 0.4s duration on both max-width and gap; keep them equal or the icon nudges out of sync with the text expansion.
Raise max-width: 120px if your longest label overflows; the label uses white-space: nowrap, so any hard cap below the label's intrinsic width will visibly clip the last characters.
Swap the inline SVGs for your icon set as long as each uses stroke: currentColor, fill: none, and viewBox="0 0 24 24"; the 18x18 sizing on .tt30i stays consistent regardless of source.
Convert to a bottom tab bar by placing .tt30n in a fixed footer, keeping the pill radius; the icon-only compact state is exactly the register mobile Instagram and Apple Podcasts use.

Gotchas — read before shipping

For a real WAI-ARIA tabs pattern the icon labels need visible or aria-labelled text at all times; inactive tabs currently expose no text to screen readers, so add aria-label on each label or a visually-hidden span so voice-over users get the same information as sighted users.
Animating max-width is a layout-triggering property; the parent flex row reflows on every frame during the reveal, which can jank on lower-end Android when many tab groups animate simultaneously. Budget for one active reveal at a time on the page.
Radio names collide across instances; two .tt30 nav bars on the same route with shared name="tt30" cross-uncheck. Rename per instance or the second nav hijacks the first's selection.
The currentColor stroke on SVGs inherits from the label, but the label's color transition is 0.3s while the tab background is also 0.3s; if you retune one, retune both or the icon color arrives before the background finishes filling, breaking the read.
SSR the checked attribute deliberately: whichever radio has checked at render is what expands on first paint. If your framework hydrates a different value you'll get a hydration mismatch and a flash of two expanded tabs.
On very narrow viewports the pill can outgrow the container once the active label expands past 120px; wrap the nav in an overflow-x: auto container or drop max-width to 80px on the tightest breakpoints so nothing clips off-screen.

Browser support

Chrome	Safari	Firefox	Edge
51+	10+	52+	51+

Flex, sibling combinators, animated max-width, and prefers-reduced-motion are all baseline-safe. focus-visible for the dashed accent ring needs Safari 15.4 and Firefox 85; earlier versions show a persistent outline after click, which stays functional.

Techniques used in this demo

:focus-visibleMDN ↗box-shadowMDN ↗aria-* attributesMDN ↗