Gentleface › Text & formatting › text-size-sparkle

text-size-sparkle icon

Text size sparkle: auto fit text, smart text size. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated text-size-sparkle-grow · line-round

The sparkle twinkles out and the small T grows a size, then another, from its baseline. The sparkle twinkles in on the larger text, and the T steps back down to its own size.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.2 s to 2.05 s. Examples and helper.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6.144 2.144C6.241 2.048 6.359 2 6.5 2L14.5 2C14.641 2 14.759 2.048 14.856 2.144C14.952 2.241 15 2.359 15 2.5L15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4C14.359 4 14.241 3.952 14.144 3.856C14.048 3.759 14 3.641 14 3.5L14 3L11 3L11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6C10.359 6 10.241 5.952 10.144 5.856C10.048 5.759 10 5.641 10 5.5L10 3L7 3L7 3.5C7 3.641 6.952 3.759 6.856 3.856C6.759 3.952 6.641 4 6.5 4C6.359 4 6.241 3.952 6.144 3.856C6.048 3.759 6 3.641 6 3.5L6 2.5C6 2.359 6.048 2.241 6.144 2.144ZM4 13.5C4 13.641 3.952 13.759 3.856 13.856C3.759 13.952 3.641 14 3.5 14C3.359 14 3.241 13.952 3.144 13.856C3.048 13.759 3 13.641 3 13.5L3 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L5.5 7C5.641 7 5.759 7.048 5.856 7.144C5.952 7.241 6 7.359 6 7.5C6 7.641 5.952 7.759 5.856 7.856C5.759 7.952 5.641 8 5.5 8L4 8L4 13.5ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z"/></svg>

React

// Gentleface "text-size-sparkle" (line-round), MIT. https://gentleface.com/icons/text-size-sparkle
import type { SVGProps } from 'react';

export function TextSizeSparkleIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M6.144 2.144C6.241 2.048 6.359 2 6.5 2L14.5 2C14.641 2 14.759 2.048 14.856 2.144C14.952 2.241 15 2.359 15 2.5L15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4C14.359 4 14.241 3.952 14.144 3.856C14.048 3.759 14 3.641 14 3.5L14 3L11 3L11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6C10.359 6 10.241 5.952 10.144 5.856C10.048 5.759 10 5.641 10 5.5L10 3L7 3L7 3.5C7 3.641 6.952 3.759 6.856 3.856C6.759 3.952 6.641 4 6.5 4C6.359 4 6.241 3.952 6.144 3.856C6.048 3.759 6 3.641 6 3.5L6 2.5C6 2.359 6.048 2.241 6.144 2.144ZM4 13.5C4 13.641 3.952 13.759 3.856 13.856C3.759 13.952 3.641 14 3.5 14C3.359 14 3.241 13.952 3.144 13.856C3.048 13.759 3 13.641 3 13.5L3 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L5.5 7C5.641 7 5.759 7.048 5.856 7.144C5.952 7.241 6 7.359 6 7.5C6 7.641 5.952 7.759 5.856 7.856C5.759 7.952 5.641 8 5.5 8L4 8L4 13.5ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z" />
    </svg>
  );
}

Vue

Vue: see /icons/text-size-sparkle.md

Svelte

Svelte: see /icons/text-size-sparkle.md

HTML img

HTML img: see /icons/text-size-sparkle.md

CSS

CSS: see /icons/text-size-sparkle.md

Data URL

Data URL: see /icons/text-size-sparkle.md

Sprite

Sprite: see /icons/text-size-sparkle.md

SwiftUI

SwiftUI: see /icons/text-size-sparkle.md

Compose

Compose: see /icons/text-size-sparkle.md

Android XML

Android XML: see /icons/text-size-sparkle.md

Flutter

Flutter: see /icons/text-size-sparkle.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { TextSizeSparkleIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

auto fit text, smart text size

Example

Auto-fit text to the box with AI

Built from

text-size + sparkle

Tags

text-size, font-size, size, scale, letters, text, format, t, sparkle

Category

Text & formatting

Component name

TextSizeSparkleIcon

History

2026-11-06 added, released in 0.4.0

Since

version 0.4.0

Family 38

text-size bold case-lower case-sensitive case-sensitive-arrow-down case-sensitive-off case-sensitive-plus case-sensitive-swap case-title case-upper footnote heading

More text & formatting icons

align-center align-justify align-justify-center align-left align-right asterisk border-all border-bottom border-horizontal border-inner border-left border-none border-outer border-right border-top border-vertical · all text & formatting icons

For agents

Metadata: /icons/text-size-sparkle.json · Markdown: /icons/text-size-sparkle.md · SVG: https://gentleface.com/svg/{style}/16/text-size-sparkle.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/text-size-sparkle.png

text-size-sparkle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp