# letter-spacing icon Letter spacing. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/letter-spacing - Category: Text & formatting - Use it for: letter spacing, character spacing, kerning - Tags: letter-spacing, character-spacing, tracking, kerning, spacing, letters, av, text, format - Family: bold, case-lower, case-sensitive, heading, heading-1, heading-2, heading-3, italic, pilcrow, spell-check, strikethrough, subscript, superscript, text-color, text-size, text-size-decrease, text-size-increase, type, type-plus, type-x, underline - Component name: LetterSpacingIcon - Added: 2026-10-16 ## Files 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. - line-round: https://gentleface.com/svg/line-round/16/letter-spacing.svg · PNG https://gentleface.com/png/line-round/16/letter-spacing.png · https://gentleface.com/png/line-round/32/letter-spacing.png · https://gentleface.com/png/line-round/48/letter-spacing.png - line-soft: https://gentleface.com/svg/line-soft/16/letter-spacing.svg · PNG https://gentleface.com/png/line-soft/16/letter-spacing.png · https://gentleface.com/png/line-soft/32/letter-spacing.png · https://gentleface.com/png/line-soft/48/letter-spacing.png - line-sharp: https://gentleface.com/svg/line-sharp/16/letter-spacing.svg · PNG https://gentleface.com/png/line-sharp/16/letter-spacing.png · https://gentleface.com/png/line-sharp/32/letter-spacing.png · https://gentleface.com/png/line-sharp/48/letter-spacing.png - solid-round: https://gentleface.com/svg/solid-round/16/letter-spacing.svg · PNG https://gentleface.com/png/solid-round/16/letter-spacing.png · https://gentleface.com/png/solid-round/32/letter-spacing.png · https://gentleface.com/png/solid-round/48/letter-spacing.png - solid-soft: https://gentleface.com/svg/solid-soft/16/letter-spacing.svg · PNG https://gentleface.com/png/solid-soft/16/letter-spacing.png · https://gentleface.com/png/solid-soft/32/letter-spacing.png · https://gentleface.com/png/solid-soft/48/letter-spacing.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/letter-spacing.svg · PNG https://gentleface.com/png/solid-sharp/16/letter-spacing.png · https://gentleface.com/png/solid-sharp/32/letter-spacing.png · https://gentleface.com/png/solid-sharp/48/letter-spacing.png The SVG of every style: https://gentleface.com/icons/letter-spacing.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "letter-spacing" (line-round), MIT. https://gentleface.com/icons/letter-spacing import type { SVGProps } from 'react'; export function LetterSpacingIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "letter-spacing" (line-round), MIT. https://gentleface.com/icons/letter-spacing. Takes the text color. */ .icon-letter-spacing { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "letter-spacing" (line-round), MIT. https://gentleface.com/icons/letter-spacing import SwiftUI struct LetterSpacingIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 7.974, y: 7.658)) p.addCurve(to: CGPoint(x: 7.724, y: 7.947), control1: CGPoint(x: 7.931, y: 7.789), control2: CGPoint(x: 7.847, y: 7.885)) p.addCurve(to: CGPoint(x: 7.342, y: 7.974), control1: CGPoint(x: 7.6, y: 8.009), control2: CGPoint(x: 7.473, y: 8.018)) p.addCurve(to: CGPoint(x: 7.053, y: 7.724), control1: CGPoint(x: 7.211, y: 7.931), control2: CGPoint(x: 7.115, y: 7.847)) p.addLine(to: CGPoint(x: 6.191, y: 6)) p.addLine(to: CGPoint(x: 2.809, y: 6)) p.addLine(to: CGPoint(x: 1.947, y: 7.724)) p.addCurve(to: CGPoint(x: 1.658, y: 7.974), control1: CGPoint(x: 1.885, y: 7.847), control2: CGPoint(x: 1.789, y: 7.931)) p.addCurve(to: CGPoint(x: 1.276, y: 7.947), control1: CGPoint(x: 1.527, y: 8.018), control2: CGPoint(x: 1.4, y: 8.009)) p.addCurve(to: CGPoint(x: 1.026, y: 7.658), control1: CGPoint(x: 1.153, y: 7.885), control2: CGPoint(x: 1.069, y: 7.789)) p.addCurve(to: CGPoint(x: 1.053, y: 7.276), control1: CGPoint(x: 0.982, y: 7.527), control2: CGPoint(x: 0.991, y: 7.4)) p.addLine(to: CGPoint(x: 4.053, y: 1.276)) p.addCurve(to: CGPoint(x: 4.341, y: 1.023), control1: CGPoint(x: 4.116, y: 1.15), control2: CGPoint(x: 4.212, y: 1.066)) p.addCurve(to: CGPoint(x: 4.724, y: 1.053), control1: CGPoint(x: 4.47, y: 0.98), control2: CGPoint(x: 4.598, y: 0.99)) p.addCurve(to: CGPoint(x: 4.947, y: 1.276), control1: CGPoint(x: 4.823, y: 1.102), control2: CGPoint(x: 4.898, y: 1.177)) p.addLine(to: CGPoint(x: 7.947, y: 7.276)) p.addCurve(to: CGPoint(x: 7.974, y: 7.658), control1: CGPoint(x: 8.009, y: 7.4), control2: CGPoint(x: 8.018, y: 7.527)) p.closeSubpath() p.move(to: CGPoint(x: 14.053, y: 1.276)) p.addCurve(to: CGPoint(x: 14.341, y: 1.023), control1: CGPoint(x: 14.116, y: 1.15), control2: CGPoint(x: 14.212, y: 1.066)) p.addCurve(to: CGPoint(x: 14.724, y: 1.053), control1: CGPoint(x: 14.47, y: 0.98), control2: CGPoint(x: 14.598, y: 0.99)) p.addCurve(to: CGPoint(x: 14.977, y: 1.341), control1: CGPoint(x: 14.85, y: 1.116), control2: CGPoint(x: 14.934, y: 1.212)) p.addCurve(to: CGPoint(x: 14.947, y: 1.724), control1: CGPoint(x: 15.02, y: 1.47), control2: CGPoint(x: 15.01, y: 1.598)) p.addLine(to: CGPoint(x: 11.947, y: 7.724)) p.addCurve(to: CGPoint(x: 11.724, y: 7.947), control1: CGPoint(x: 11.898, y: 7.823), control2: CGPoint(x: 11.823, y: 7.898)) p.addCurve(to: CGPoint(x: 11.342, y: 7.974), control1: CGPoint(x: 11.6, y: 8.009), control2: CGPoint(x: 11.473, y: 8.018)) p.addCurve(to: CGPoint(x: 11.053, y: 7.724), control1: CGPoint(x: 11.211, y: 7.931), control2: CGPoint(x: 11.115, y: 7.847)) p.addLine(to: CGPoint(x: 8.053, y: 1.724)) p.addCurve(to: CGPoint(x: 8.026, y: 1.342), control1: CGPoint(x: 7.991, y: 1.6), control2: CGPoint(x: 7.982, y: 1.473)) p.addCurve(to: CGPoint(x: 8.276, y: 1.053), control1: CGPoint(x: 8.069, y: 1.211), control2: CGPoint(x: 8.153, y: 1.115)) p.addCurve(to: CGPoint(x: 8.659, y: 1.023), control1: CGPoint(x: 8.402, y: 0.99), control2: CGPoint(x: 8.53, y: 0.98)) p.addCurve(to: CGPoint(x: 8.947, y: 1.276), control1: CGPoint(x: 8.788, y: 1.066), control2: CGPoint(x: 8.884, y: 1.15)) p.addLine(to: CGPoint(x: 11.5, y: 6.382)) p.addLine(to: CGPoint(x: 14.053, y: 1.276)) p.closeSubpath() p.move(to: CGPoint(x: 4.5, y: 2.618)) p.addLine(to: CGPoint(x: 3.309, y: 5)) p.addLine(to: CGPoint(x: 5.691, y: 5)) p.addLine(to: CGPoint(x: 4.5, y: 2.618)) p.closeSubpath() p.move(to: CGPoint(x: 15.003, y: 12.5)) p.addCurve(to: CGPoint(x: 14.854, y: 12.854), control1: CGPoint(x: 15.003, y: 12.636), control2: CGPoint(x: 14.953, y: 12.754)) p.addLine(to: CGPoint(x: 12.854, y: 14.854)) p.addCurve(to: CGPoint(x: 12.5, y: 15.003), control1: CGPoint(x: 12.754, y: 14.953), control2: CGPoint(x: 12.636, y: 15.003)) p.addCurve(to: CGPoint(x: 12.146, y: 14.854), control1: CGPoint(x: 12.364, y: 15.003), control2: CGPoint(x: 12.246, y: 14.953)) p.addCurve(to: CGPoint(x: 11.997, y: 14.5), control1: CGPoint(x: 12.047, y: 14.754), control2: CGPoint(x: 11.997, y: 14.636)) p.addCurve(to: CGPoint(x: 12.146, y: 14.146), control1: CGPoint(x: 11.997, y: 14.364), control2: CGPoint(x: 12.047, y: 14.246)) p.addLine(to: CGPoint(x: 13.293, y: 13)) p.addLine(to: CGPoint(x: 2.707, y: 13)) p.addLine(to: CGPoint(x: 3.854, y: 14.146)) p.addCurve(to: CGPoint(x: 4.003, y: 14.5), control1: CGPoint(x: 3.953, y: 14.246), control2: CGPoint(x: 4.003, y: 14.364)) p.addCurve(to: CGPoint(x: 3.854, y: 14.854), control1: CGPoint(x: 4.003, y: 14.636), control2: CGPoint(x: 3.953, y: 14.754)) p.addCurve(to: CGPoint(x: 3.5, y: 15), control1: CGPoint(x: 3.756, y: 14.951), control2: CGPoint(x: 3.638, y: 15)) p.addCurve(to: CGPoint(x: 3.146, y: 14.854), control1: CGPoint(x: 3.362, y: 15), control2: CGPoint(x: 3.244, y: 14.951)) p.addLine(to: CGPoint(x: 1.146, y: 12.854)) p.addCurve(to: CGPoint(x: 0.997, y: 12.5), control1: CGPoint(x: 1.047, y: 12.754), control2: CGPoint(x: 0.997, y: 12.636)) p.addCurve(to: CGPoint(x: 1.146, y: 12.146), control1: CGPoint(x: 0.997, y: 12.364), control2: CGPoint(x: 1.047, y: 12.246)) p.addLine(to: CGPoint(x: 3.146, y: 10.146)) p.addCurve(to: CGPoint(x: 3.5, y: 10), control1: CGPoint(x: 3.244, y: 10.049), control2: CGPoint(x: 3.362, y: 10)) p.addCurve(to: CGPoint(x: 3.854, y: 10.146), control1: CGPoint(x: 3.638, y: 10), control2: CGPoint(x: 3.756, y: 10.049)) p.addCurve(to: CGPoint(x: 4.003, y: 10.5), control1: CGPoint(x: 3.953, y: 10.246), control2: CGPoint(x: 4.003, y: 10.364)) p.addCurve(to: CGPoint(x: 3.854, y: 10.854), control1: CGPoint(x: 4.003, y: 10.636), control2: CGPoint(x: 3.953, y: 10.754)) p.addLine(to: CGPoint(x: 2.707, y: 12)) p.addLine(to: CGPoint(x: 13.293, y: 12)) p.addLine(to: CGPoint(x: 12.146, y: 10.854)) p.addCurve(to: CGPoint(x: 11.997, y: 10.5), control1: CGPoint(x: 12.047, y: 10.754), control2: CGPoint(x: 11.997, y: 10.636)) p.addCurve(to: CGPoint(x: 12.146, y: 10.146), control1: CGPoint(x: 11.997, y: 10.364), control2: CGPoint(x: 12.047, y: 10.246)) p.addCurve(to: CGPoint(x: 12.5, y: 9.997), control1: CGPoint(x: 12.246, y: 10.047), control2: CGPoint(x: 12.364, y: 9.997)) p.addCurve(to: CGPoint(x: 12.854, y: 10.146), control1: CGPoint(x: 12.636, y: 9.997), control2: CGPoint(x: 12.754, y: 10.047)) p.addLine(to: CGPoint(x: 14.854, y: 12.146)) p.addCurve(to: CGPoint(x: 15.003, y: 12.5), control1: CGPoint(x: 14.953, y: 12.246), control2: CGPoint(x: 15.003, y: 12.364)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // LetterSpacingIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "letter-spacing" (line-round), MIT. https://gentleface.com/icons/letter-spacing import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val LetterSpacingIcon: ImageVector by lazy { ImageVector.Builder( name = "letter-spacing", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("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"), fill = SolidColor(Color.Black), ).build() } // Icon(LetterSpacingIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "letter-spacing" (line-round), MIT. https://gentleface.com/icons/letter-spacing import 'package:flutter/widgets.dart'; class LetterSpacingIcon extends StatelessWidget { const LetterSpacingIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _LetterSpacingIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _LetterSpacingIconPainter extends CustomPainter { _LetterSpacingIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(7.974, 7.658) ..cubicTo(7.931, 7.789, 7.847, 7.885, 7.724, 7.947) ..cubicTo(7.6, 8.009, 7.473, 8.018, 7.342, 7.974) ..cubicTo(7.211, 7.931, 7.115, 7.847, 7.053, 7.724) ..lineTo(6.191, 6) ..lineTo(2.809, 6) ..lineTo(1.947, 7.724) ..cubicTo(1.885, 7.847, 1.789, 7.931, 1.658, 7.974) ..cubicTo(1.527, 8.018, 1.4, 8.009, 1.276, 7.947) ..cubicTo(1.153, 7.885, 1.069, 7.789, 1.026, 7.658) ..cubicTo(0.982, 7.527, 0.991, 7.4, 1.053, 7.276) ..lineTo(4.053, 1.276) ..cubicTo(4.116, 1.15, 4.212, 1.066, 4.341, 1.023) ..cubicTo(4.47, 0.98, 4.598, 0.99, 4.724, 1.053) ..cubicTo(4.823, 1.102, 4.898, 1.177, 4.947, 1.276) ..lineTo(7.947, 7.276) ..cubicTo(8.009, 7.4, 8.018, 7.527, 7.974, 7.658) ..close() ..moveTo(14.053, 1.276) ..cubicTo(14.116, 1.15, 14.212, 1.066, 14.341, 1.023) ..cubicTo(14.47, 0.98, 14.598, 0.99, 14.724, 1.053) ..cubicTo(14.85, 1.116, 14.934, 1.212, 14.977, 1.341) ..cubicTo(15.02, 1.47, 15.01, 1.598, 14.947, 1.724) ..lineTo(11.947, 7.724) ..cubicTo(11.898, 7.823, 11.823, 7.898, 11.724, 7.947) ..cubicTo(11.6, 8.009, 11.473, 8.018, 11.342, 7.974) ..cubicTo(11.211, 7.931, 11.115, 7.847, 11.053, 7.724) ..lineTo(8.053, 1.724) ..cubicTo(7.991, 1.6, 7.982, 1.473, 8.026, 1.342) ..cubicTo(8.069, 1.211, 8.153, 1.115, 8.276, 1.053) ..cubicTo(8.402, 0.99, 8.53, 0.98, 8.659, 1.023) ..cubicTo(8.788, 1.066, 8.884, 1.15, 8.947, 1.276) ..lineTo(11.5, 6.382) ..lineTo(14.053, 1.276) ..close() ..moveTo(4.5, 2.618) ..lineTo(3.309, 5) ..lineTo(5.691, 5) ..lineTo(4.5, 2.618) ..close() ..moveTo(15.003, 12.5) ..cubicTo(15.003, 12.636, 14.953, 12.754, 14.854, 12.854) ..lineTo(12.854, 14.854) ..cubicTo(12.754, 14.953, 12.636, 15.003, 12.5, 15.003) ..cubicTo(12.364, 15.003, 12.246, 14.953, 12.146, 14.854) ..cubicTo(12.047, 14.754, 11.997, 14.636, 11.997, 14.5) ..cubicTo(11.997, 14.364, 12.047, 14.246, 12.146, 14.146) ..lineTo(13.293, 13) ..lineTo(2.707, 13) ..lineTo(3.854, 14.146) ..cubicTo(3.953, 14.246, 4.003, 14.364, 4.003, 14.5) ..cubicTo(4.003, 14.636, 3.953, 14.754, 3.854, 14.854) ..cubicTo(3.756, 14.951, 3.638, 15, 3.5, 15) ..cubicTo(3.362, 15, 3.244, 14.951, 3.146, 14.854) ..lineTo(1.146, 12.854) ..cubicTo(1.047, 12.754, 0.997, 12.636, 0.997, 12.5) ..cubicTo(0.997, 12.364, 1.047, 12.246, 1.146, 12.146) ..lineTo(3.146, 10.146) ..cubicTo(3.244, 10.049, 3.362, 10, 3.5, 10) ..cubicTo(3.638, 10, 3.756, 10.049, 3.854, 10.146) ..cubicTo(3.953, 10.246, 4.003, 10.364, 4.003, 10.5) ..cubicTo(4.003, 10.636, 3.953, 10.754, 3.854, 10.854) ..lineTo(2.707, 12) ..lineTo(13.293, 12) ..lineTo(12.146, 10.854) ..cubicTo(12.047, 10.754, 11.997, 10.636, 11.997, 10.5) ..cubicTo(11.997, 10.364, 12.047, 10.246, 12.146, 10.146) ..cubicTo(12.246, 10.047, 12.364, 9.997, 12.5, 9.997) ..cubicTo(12.636, 9.997, 12.754, 10.047, 12.854, 10.146) ..lineTo(14.854, 12.146) ..cubicTo(14.953, 12.246, 15.003, 12.364, 15.003, 12.5) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_LetterSpacingIconPainter old) => old.color != color; } ```