Gentleface › Text & formatting › letter-spacing

letter-spacing icon

Letter spacing: letter spacing, character spacing, kerning. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

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="M7.974 7.658C7.931 7.789 7.847 7.885 7.724 7.947C7.6 8.009 7.473 8.018 7.342 7.974C7.211 7.931 7.115 7.847 7.053 7.724L6.191 6L2.809 6L1.947 7.724C1.885 7.847 1.789 7.931 1.658 7.974C1.527 8.018 1.4 8.009 1.276 7.947C1.153 7.885 1.069 7.789 1.026 7.658C0.982 7.527 0.991 7.4 1.053 7.276L4.053 1.276C4.116 1.15 4.212 1.066 4.341 1.023C4.47 0.98 4.598 0.99 4.724 1.053C4.823 1.102 4.898 1.177 4.947 1.276L7.947 7.276C8.009 7.4 8.018 7.527 7.974 7.658ZM14.053 1.276C14.116 1.15 14.212 1.066 14.341 1.023C14.47 0.98 14.598 0.99 14.724 1.053C14.85 1.116 14.934 1.212 14.977 1.341C15.02 1.47 15.01 1.598 14.947 1.724L11.947 7.724C11.898 7.823 11.823 7.898 11.724 7.947C11.6 8.009 11.473 8.018 11.342 7.974C11.211 7.931 11.115 7.847 11.053 7.724L8.053 1.724C7.991 1.6 7.982 1.473 8.026 1.342C8.069 1.211 8.153 1.115 8.276 1.053C8.402 0.99 8.53 0.98 8.659 1.023C8.788 1.066 8.884 1.15 8.947 1.276L11.5 6.382L14.053 1.276ZM4.5 2.618L3.309 5L5.691 5L4.5 2.618ZM15.003 12.5C15.003 12.636 14.953 12.754 14.854 12.854L12.854 14.854C12.754 14.953 12.636 15.003 12.5 15.003C12.364 15.003 12.246 14.953 12.146 14.854C12.047 14.754 11.997 14.636 11.997 14.5C11.997 14.364 12.047 14.246 12.146 14.146L13.293 13L2.707 13L3.854 14.146C3.953 14.246 4.003 14.364 4.003 14.5C4.003 14.636 3.953 14.754 3.854 14.854C3.756 14.951 3.638 15 3.5 15C3.362 15 3.244 14.951 3.146 14.854L1.146 12.854C1.047 12.754 0.997 12.636 0.997 12.5C0.997 12.364 1.047 12.246 1.146 12.146L3.146 10.146C3.244 10.049 3.362 10 3.5 10C3.638 10 3.756 10.049 3.854 10.146C3.953 10.246 4.003 10.364 4.003 10.5C4.003 10.636 3.953 10.754 3.854 10.854L2.707 12L13.293 12L12.146 10.854C12.047 10.754 11.997 10.636 11.997 10.5C11.997 10.364 12.047 10.246 12.146 10.146C12.246 10.047 12.364 9.997 12.5 9.997C12.636 9.997 12.754 10.047 12.854 10.146L14.854 12.146C14.953 12.246 15.003 12.364 15.003 12.5Z"/></svg>

React

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

export function LetterSpacingIcon(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="M7.974 7.658C7.931 7.789 7.847 7.885 7.724 7.947C7.6 8.009 7.473 8.018 7.342 7.974C7.211 7.931 7.115 7.847 7.053 7.724L6.191 6L2.809 6L1.947 7.724C1.885 7.847 1.789 7.931 1.658 7.974C1.527 8.018 1.4 8.009 1.276 7.947C1.153 7.885 1.069 7.789 1.026 7.658C0.982 7.527 0.991 7.4 1.053 7.276L4.053 1.276C4.116 1.15 4.212 1.066 4.341 1.023C4.47 0.98 4.598 0.99 4.724 1.053C4.823 1.102 4.898 1.177 4.947 1.276L7.947 7.276C8.009 7.4 8.018 7.527 7.974 7.658ZM14.053 1.276C14.116 1.15 14.212 1.066 14.341 1.023C14.47 0.98 14.598 0.99 14.724 1.053C14.85 1.116 14.934 1.212 14.977 1.341C15.02 1.47 15.01 1.598 14.947 1.724L11.947 7.724C11.898 7.823 11.823 7.898 11.724 7.947C11.6 8.009 11.473 8.018 11.342 7.974C11.211 7.931 11.115 7.847 11.053 7.724L8.053 1.724C7.991 1.6 7.982 1.473 8.026 1.342C8.069 1.211 8.153 1.115 8.276 1.053C8.402 0.99 8.53 0.98 8.659 1.023C8.788 1.066 8.884 1.15 8.947 1.276L11.5 6.382L14.053 1.276ZM4.5 2.618L3.309 5L5.691 5L4.5 2.618ZM15.003 12.5C15.003 12.636 14.953 12.754 14.854 12.854L12.854 14.854C12.754 14.953 12.636 15.003 12.5 15.003C12.364 15.003 12.246 14.953 12.146 14.854C12.047 14.754 11.997 14.636 11.997 14.5C11.997 14.364 12.047 14.246 12.146 14.146L13.293 13L2.707 13L3.854 14.146C3.953 14.246 4.003 14.364 4.003 14.5C4.003 14.636 3.953 14.754 3.854 14.854C3.756 14.951 3.638 15 3.5 15C3.362 15 3.244 14.951 3.146 14.854L1.146 12.854C1.047 12.754 0.997 12.636 0.997 12.5C0.997 12.364 1.047 12.246 1.146 12.146L3.146 10.146C3.244 10.049 3.362 10 3.5 10C3.638 10 3.756 10.049 3.854 10.146C3.953 10.246 4.003 10.364 4.003 10.5C4.003 10.636 3.953 10.754 3.854 10.854L2.707 12L13.293 12L12.146 10.854C12.047 10.754 11.997 10.636 11.997 10.5C11.997 10.364 12.047 10.246 12.146 10.146C12.246 10.047 12.364 9.997 12.5 9.997C12.636 9.997 12.754 10.047 12.854 10.146L14.854 12.146C14.953 12.246 15.003 12.364 15.003 12.5Z" />
    </svg>
  );
}

Vue

Vue: see /icons/letter-spacing.md

Svelte

Svelte: see /icons/letter-spacing.md

HTML img

HTML img: see /icons/letter-spacing.md

CSS

CSS: see /icons/letter-spacing.md

Data URL

Data URL: see /icons/letter-spacing.md

Sprite

Sprite: see /icons/letter-spacing.md

SwiftUI

SwiftUI: see /icons/letter-spacing.md

Compose

Compose: see /icons/letter-spacing.md

Android XML

Android XML: see /icons/letter-spacing.md

Flutter

Flutter: see /icons/letter-spacing.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. 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.

Meaning

Use it for

letter spacing, character spacing, kerning

Tags

letter-spacing, character-spacing, tracking, kerning, spacing, letters, av, text, format

Category

Text & formatting

Component name

LetterSpacingIcon

History

2026-10-16 added

Family 21

bold case-lower case-sensitive heading heading-1 heading-2 heading-3 italic pilcrow spell-check strikethrough subscript

More text & formatting icons

align-center align-justify align-left align-right asterisk border-all border-bottom border-inner border-left border-none border-right border-top checklist copyright divider divider-vertical · all text & formatting icons

For agents

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

letter-spacing icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp