Gentleface › Text & formatting › type
type icon
typeType: text, type, typography, text tool. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
Code line-round
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.144 2.144C2.241 2.048 2.359 2 2.5 2L12.5 2C12.641 2 12.759 2.048 12.856 2.144C12.952 2.241 13 2.359 13 2.5L13 4.5C13 4.641 12.952 4.759 12.856 4.856C12.759 4.952 12.641 5 12.5 5C12.359 5 12.241 4.952 12.144 4.856C12.048 4.759 12 4.641 12 4.5L12 3L8 3L8 12L9.5 12C9.641 12 9.759 12.048 9.856 12.144C9.952 12.241 10 12.359 10 12.5C10 12.641 9.952 12.759 9.856 12.856C9.759 12.952 9.641 13 9.5 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L7 12L7 3L3 3L3 4.5C3 4.641 2.952 4.759 2.856 4.856C2.759 4.952 2.641 5 2.5 5C2.359 5 2.241 4.952 2.144 4.856C2.048 4.759 2 4.641 2 4.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144Z"/></svg>
// Gentleface "type" (line-round), MIT. https://gentleface.com/icons/type
import type { SVGProps } from 'react';
export function TypeIcon(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="M2.144 2.144C2.241 2.048 2.359 2 2.5 2L12.5 2C12.641 2 12.759 2.048 12.856 2.144C12.952 2.241 13 2.359 13 2.5L13 4.5C13 4.641 12.952 4.759 12.856 4.856C12.759 4.952 12.641 5 12.5 5C12.359 5 12.241 4.952 12.144 4.856C12.048 4.759 12 4.641 12 4.5L12 3L8 3L8 12L9.5 12C9.641 12 9.759 12.048 9.856 12.144C9.952 12.241 10 12.359 10 12.5C10 12.641 9.952 12.759 9.856 12.856C9.759 12.952 9.641 13 9.5 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L7 12L7 3L3 3L3 4.5C3 4.641 2.952 4.759 2.856 4.856C2.759 4.952 2.641 5 2.5 5C2.359 5 2.241 4.952 2.144 4.856C2.048 4.759 2 4.641 2 4.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144Z" />
</svg>
);
}Vue: see /icons/type.md
Svelte: see /icons/type.md
HTML img: see /icons/type.md
CSS: see /icons/type.md
Data URL: see /icons/type.md
Sprite: see /icons/type.md
SwiftUI: see /icons/type.md
Compose: see /icons/type.md
Android XML: see /icons/type.md
Flutter: see /icons/type.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
- text, type, typography, text tool
- Alternatives
case-sensitive: a font picker (font)type-plus: add a text box (add-text)cursor-text: the I-beam text cursor (text-cursor)
- Also fits
- font file: text, fonts or typography without a file (typography)
- font: text in general or the text tool (text)
- heading: plain text (text)
- Not for
- text cursor (use
cursor-text): type is the text tool or text in general (text)
- text cursor (use
- Tags
- text, type, font, typography, typeface, letter, t
- Category
- Text & formatting
- Component name
TypeIcon- History
- added
Family 21
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/type.json · Markdown: /icons/type.md · SVG: https://gentleface.com/svg/{style}/16/type.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/type.png