# thumbs-up-down icon Thumbs up down. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/thumbs-up-down - Category: Social & emotions - Use it for: thumbs rating, rate this, like dislike - Tags: thumbs, like, dislike, rating, rate, feedback, vote, up-down, approve, reject, review - Family: thumbs-down, thumbs-up - Component name: ThumbsUpDownIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { ThumbsUpDownIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## 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/thumbs-up-down.svg · PNG https://gentleface.com/png/line-round/16/thumbs-up-down.png · https://gentleface.com/png/line-round/32/thumbs-up-down.png · https://gentleface.com/png/line-round/48/thumbs-up-down.png - line-soft: https://gentleface.com/svg/line-soft/16/thumbs-up-down.svg · PNG https://gentleface.com/png/line-soft/16/thumbs-up-down.png · https://gentleface.com/png/line-soft/32/thumbs-up-down.png · https://gentleface.com/png/line-soft/48/thumbs-up-down.png - line-sharp: https://gentleface.com/svg/line-sharp/16/thumbs-up-down.svg · PNG https://gentleface.com/png/line-sharp/16/thumbs-up-down.png · https://gentleface.com/png/line-sharp/32/thumbs-up-down.png · https://gentleface.com/png/line-sharp/48/thumbs-up-down.png - solid-round: https://gentleface.com/svg/solid-round/16/thumbs-up-down.svg · PNG https://gentleface.com/png/solid-round/16/thumbs-up-down.png · https://gentleface.com/png/solid-round/32/thumbs-up-down.png · https://gentleface.com/png/solid-round/48/thumbs-up-down.png - solid-soft: https://gentleface.com/svg/solid-soft/16/thumbs-up-down.svg · PNG https://gentleface.com/png/solid-soft/16/thumbs-up-down.png · https://gentleface.com/png/solid-soft/32/thumbs-up-down.png · https://gentleface.com/png/solid-soft/48/thumbs-up-down.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/thumbs-up-down.svg · PNG https://gentleface.com/png/solid-sharp/16/thumbs-up-down.png · https://gentleface.com/png/solid-sharp/32/thumbs-up-down.png · https://gentleface.com/png/solid-sharp/48/thumbs-up-down.png The SVG of every style: https://gentleface.com/icons/thumbs-up-down.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 "thumbs-up-down" (line-round), MIT. https://gentleface.com/icons/thumbs-up-down import type { SVGProps } from 'react'; export function ThumbsUpDownIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "thumbs-up-down" (line-round), MIT. https://gentleface.com/icons/thumbs-up-down. Takes the text color. */ .icon-thumbs-up-down { 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='M3.915 1.553C3.999 1.383 4.122 1.249 4.283 1.149C4.444 1.05 4.62 1 4.809 1L5.5 1C5.696 1 5.889 1.044 6.079 1.133C6.249 1.212 6.403 1.321 6.541 1.459C6.679 1.597 6.788 1.751 6.867 1.921C6.956 2.111 7 2.304 7 2.5L7 3L7.691 3C7.852 3 8.004 3.037 8.147 3.11C8.312 3.195 8.444 3.316 8.542 3.474C8.639 3.632 8.689 3.804 8.691 3.99C8.693 4.151 8.657 4.303 8.585 4.447L7.085 7.447C7.001 7.617 6.878 7.751 6.717 7.851C6.556 7.95 6.38 8 6.191 8L2 8C1.724 8 1.488 7.902 1.293 7.707C1.098 7.512 1 7.276 1 7L1 4C1 3.724 1.098 3.488 1.293 3.293C1.488 3.098 1.724 3 2 3L3.191 3L3.915 1.553ZM7.691 4L7 4C6.724 4 6.488 3.902 6.293 3.707C6.098 3.512 6 3.276 6 3L6 2.5C6 2.388 5.945 2.277 5.834 2.166C5.723 2.055 5.612 2 5.5 2L4.809 2L4.085 3.447C4.06 3.497 4.032 3.545 4 3.589L4 7L6.191 7L7.691 4ZM3 7L3 4L2 4L2 7L3 7ZM12.085 14.447C12.001 14.617 11.878 14.751 11.717 14.851C11.556 14.95 11.38 15 11.191 15L10.5 15C10.304 15 10.111 14.956 9.921 14.867C9.751 14.788 9.597 14.679 9.459 14.541C9.321 14.403 9.212 14.249 9.133 14.079C9.044 13.889 9 13.696 9 13.5L9 13L8.309 13C8.148 13 7.996 12.963 7.853 12.89C7.688 12.805 7.556 12.684 7.458 12.526C7.361 12.368 7.311 12.196 7.309 12.01C7.307 11.849 7.343 11.697 7.415 11.553L8.915 8.553C8.999 8.383 9.122 8.249 9.283 8.149C9.444 8.05 9.62 8 9.809 8L14 8C14.276 8 14.512 8.098 14.707 8.293C14.902 8.488 15 8.724 15 9L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L12.809 13L12.085 14.447ZM9 12C9.276 12 9.512 12.098 9.707 12.293C9.902 12.488 10 12.724 10 13L10 13.5C10 13.612 10.055 13.723 10.166 13.834C10.277 13.945 10.388 14 10.5 14L11.191 14L11.915 12.553C11.94 12.503 11.968 12.455 12 12.411L12 9L9.809 9L8.309 12L9 12ZM13 12L14 12L14 9L13 9L13 12Z'/%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='M3.915 1.553C3.999 1.383 4.122 1.249 4.283 1.149C4.444 1.05 4.62 1 4.809 1L5.5 1C5.696 1 5.889 1.044 6.079 1.133C6.249 1.212 6.403 1.321 6.541 1.459C6.679 1.597 6.788 1.751 6.867 1.921C6.956 2.111 7 2.304 7 2.5L7 3L7.691 3C7.852 3 8.004 3.037 8.147 3.11C8.312 3.195 8.444 3.316 8.542 3.474C8.639 3.632 8.689 3.804 8.691 3.99C8.693 4.151 8.657 4.303 8.585 4.447L7.085 7.447C7.001 7.617 6.878 7.751 6.717 7.851C6.556 7.95 6.38 8 6.191 8L2 8C1.724 8 1.488 7.902 1.293 7.707C1.098 7.512 1 7.276 1 7L1 4C1 3.724 1.098 3.488 1.293 3.293C1.488 3.098 1.724 3 2 3L3.191 3L3.915 1.553ZM7.691 4L7 4C6.724 4 6.488 3.902 6.293 3.707C6.098 3.512 6 3.276 6 3L6 2.5C6 2.388 5.945 2.277 5.834 2.166C5.723 2.055 5.612 2 5.5 2L4.809 2L4.085 3.447C4.06 3.497 4.032 3.545 4 3.589L4 7L6.191 7L7.691 4ZM3 7L3 4L2 4L2 7L3 7ZM12.085 14.447C12.001 14.617 11.878 14.751 11.717 14.851C11.556 14.95 11.38 15 11.191 15L10.5 15C10.304 15 10.111 14.956 9.921 14.867C9.751 14.788 9.597 14.679 9.459 14.541C9.321 14.403 9.212 14.249 9.133 14.079C9.044 13.889 9 13.696 9 13.5L9 13L8.309 13C8.148 13 7.996 12.963 7.853 12.89C7.688 12.805 7.556 12.684 7.458 12.526C7.361 12.368 7.311 12.196 7.309 12.01C7.307 11.849 7.343 11.697 7.415 11.553L8.915 8.553C8.999 8.383 9.122 8.249 9.283 8.149C9.444 8.05 9.62 8 9.809 8L14 8C14.276 8 14.512 8.098 14.707 8.293C14.902 8.488 15 8.724 15 9L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L12.809 13L12.085 14.447ZM9 12C9.276 12 9.512 12.098 9.707 12.293C9.902 12.488 10 12.724 10 13L10 13.5C10 13.612 10.055 13.723 10.166 13.834C10.277 13.945 10.388 14 10.5 14L11.191 14L11.915 12.553C11.94 12.503 11.968 12.455 12 12.411L12 9L9.809 9L8.309 12L9 12ZM13 12L14 12L14 9L13 9L13 12Z'/%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='M3.915 1.553C3.999 1.383 4.122 1.249 4.283 1.149C4.444 1.05 4.62 1 4.809 1L5.5 1C5.696 1 5.889 1.044 6.079 1.133C6.249 1.212 6.403 1.321 6.541 1.459C6.679 1.597 6.788 1.751 6.867 1.921C6.956 2.111 7 2.304 7 2.5L7 3L7.691 3C7.852 3 8.004 3.037 8.147 3.11C8.312 3.195 8.444 3.316 8.542 3.474C8.639 3.632 8.689 3.804 8.691 3.99C8.693 4.151 8.657 4.303 8.585 4.447L7.085 7.447C7.001 7.617 6.878 7.751 6.717 7.851C6.556 7.95 6.38 8 6.191 8L2 8C1.724 8 1.488 7.902 1.293 7.707C1.098 7.512 1 7.276 1 7L1 4C1 3.724 1.098 3.488 1.293 3.293C1.488 3.098 1.724 3 2 3L3.191 3L3.915 1.553ZM7.691 4L7 4C6.724 4 6.488 3.902 6.293 3.707C6.098 3.512 6 3.276 6 3L6 2.5C6 2.388 5.945 2.277 5.834 2.166C5.723 2.055 5.612 2 5.5 2L4.809 2L4.085 3.447C4.06 3.497 4.032 3.545 4 3.589L4 7L6.191 7L7.691 4ZM3 7L3 4L2 4L2 7L3 7ZM12.085 14.447C12.001 14.617 11.878 14.751 11.717 14.851C11.556 14.95 11.38 15 11.191 15L10.5 15C10.304 15 10.111 14.956 9.921 14.867C9.751 14.788 9.597 14.679 9.459 14.541C9.321 14.403 9.212 14.249 9.133 14.079C9.044 13.889 9 13.696 9 13.5L9 13L8.309 13C8.148 13 7.996 12.963 7.853 12.89C7.688 12.805 7.556 12.684 7.458 12.526C7.361 12.368 7.311 12.196 7.309 12.01C7.307 11.849 7.343 11.697 7.415 11.553L8.915 8.553C8.999 8.383 9.122 8.249 9.283 8.149C9.444 8.05 9.62 8 9.809 8L14 8C14.276 8 14.512 8.098 14.707 8.293C14.902 8.488 15 8.724 15 9L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L12.809 13L12.085 14.447ZM9 12C9.276 12 9.512 12.098 9.707 12.293C9.902 12.488 10 12.724 10 13L10 13.5C10 13.612 10.055 13.723 10.166 13.834C10.277 13.945 10.388 14 10.5 14L11.191 14L11.915 12.553C11.94 12.503 11.968 12.455 12 12.411L12 9L9.809 9L8.309 12L9 12ZM13 12L14 12L14 9L13 9L13 12Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "thumbs-up-down" (line-round), MIT. https://gentleface.com/icons/thumbs-up-down import SwiftUI struct ThumbsUpDownIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 3.915, y: 1.553)) p.addCurve(to: CGPoint(x: 4.283, y: 1.149), control1: CGPoint(x: 3.999, y: 1.383), control2: CGPoint(x: 4.122, y: 1.249)) p.addCurve(to: CGPoint(x: 4.809, y: 1), control1: CGPoint(x: 4.444, y: 1.05), control2: CGPoint(x: 4.62, y: 1)) p.addLine(to: CGPoint(x: 5.5, y: 1)) p.addCurve(to: CGPoint(x: 6.079, y: 1.133), control1: CGPoint(x: 5.696, y: 1), control2: CGPoint(x: 5.889, y: 1.044)) p.addCurve(to: CGPoint(x: 6.541, y: 1.459), control1: CGPoint(x: 6.249, y: 1.212), control2: CGPoint(x: 6.403, y: 1.321)) p.addCurve(to: CGPoint(x: 6.867, y: 1.921), control1: CGPoint(x: 6.679, y: 1.597), control2: CGPoint(x: 6.788, y: 1.751)) p.addCurve(to: CGPoint(x: 7, y: 2.5), control1: CGPoint(x: 6.956, y: 2.111), control2: CGPoint(x: 7, y: 2.304)) p.addLine(to: CGPoint(x: 7, y: 3)) p.addLine(to: CGPoint(x: 7.691, y: 3)) p.addCurve(to: CGPoint(x: 8.147, y: 3.11), control1: CGPoint(x: 7.852, y: 3), control2: CGPoint(x: 8.004, y: 3.037)) p.addCurve(to: CGPoint(x: 8.542, y: 3.474), control1: CGPoint(x: 8.312, y: 3.195), control2: CGPoint(x: 8.444, y: 3.316)) p.addCurve(to: CGPoint(x: 8.691, y: 3.99), control1: CGPoint(x: 8.639, y: 3.632), control2: CGPoint(x: 8.689, y: 3.804)) p.addCurve(to: CGPoint(x: 8.585, y: 4.447), control1: CGPoint(x: 8.693, y: 4.151), control2: CGPoint(x: 8.657, y: 4.303)) p.addLine(to: CGPoint(x: 7.085, y: 7.447)) p.addCurve(to: CGPoint(x: 6.717, y: 7.851), control1: CGPoint(x: 7.001, y: 7.617), control2: CGPoint(x: 6.878, y: 7.751)) p.addCurve(to: CGPoint(x: 6.191, y: 8), control1: CGPoint(x: 6.556, y: 7.95), control2: CGPoint(x: 6.38, y: 8)) p.addLine(to: CGPoint(x: 2, y: 8)) p.addCurve(to: CGPoint(x: 1.293, y: 7.707), control1: CGPoint(x: 1.724, y: 8), control2: CGPoint(x: 1.488, y: 7.902)) p.addCurve(to: CGPoint(x: 1, y: 7), control1: CGPoint(x: 1.098, y: 7.512), control2: CGPoint(x: 1, y: 7.276)) p.addLine(to: CGPoint(x: 1, y: 4)) p.addCurve(to: CGPoint(x: 1.293, y: 3.293), control1: CGPoint(x: 1, y: 3.724), control2: CGPoint(x: 1.098, y: 3.488)) p.addCurve(to: CGPoint(x: 2, y: 3), control1: CGPoint(x: 1.488, y: 3.098), control2: CGPoint(x: 1.724, y: 3)) p.addLine(to: CGPoint(x: 3.191, y: 3)) p.addLine(to: CGPoint(x: 3.915, y: 1.553)) p.closeSubpath() p.move(to: CGPoint(x: 7.691, y: 4)) p.addLine(to: CGPoint(x: 7, y: 4)) p.addCurve(to: CGPoint(x: 6.293, y: 3.707), control1: CGPoint(x: 6.724, y: 4), control2: CGPoint(x: 6.488, y: 3.902)) p.addCurve(to: CGPoint(x: 6, y: 3), control1: CGPoint(x: 6.098, y: 3.512), control2: CGPoint(x: 6, y: 3.276)) p.addLine(to: CGPoint(x: 6, y: 2.5)) p.addCurve(to: CGPoint(x: 5.834, y: 2.166), control1: CGPoint(x: 6, y: 2.388), control2: CGPoint(x: 5.945, y: 2.277)) p.addCurve(to: CGPoint(x: 5.5, y: 2), control1: CGPoint(x: 5.723, y: 2.055), control2: CGPoint(x: 5.612, y: 2)) p.addLine(to: CGPoint(x: 4.809, y: 2)) p.addLine(to: CGPoint(x: 4.085, y: 3.447)) p.addCurve(to: CGPoint(x: 4, y: 3.589), control1: CGPoint(x: 4.06, y: 3.497), control2: CGPoint(x: 4.032, y: 3.545)) p.addLine(to: CGPoint(x: 4, y: 7)) p.addLine(to: CGPoint(x: 6.191, y: 7)) p.addLine(to: CGPoint(x: 7.691, y: 4)) p.closeSubpath() p.move(to: CGPoint(x: 3, y: 7)) p.addLine(to: CGPoint(x: 3, y: 4)) p.addLine(to: CGPoint(x: 2, y: 4)) p.addLine(to: CGPoint(x: 2, y: 7)) p.addLine(to: CGPoint(x: 3, y: 7)) p.closeSubpath() p.move(to: CGPoint(x: 12.085, y: 14.447)) p.addCurve(to: CGPoint(x: 11.717, y: 14.851), control1: CGPoint(x: 12.001, y: 14.617), control2: CGPoint(x: 11.878, y: 14.751)) p.addCurve(to: CGPoint(x: 11.191, y: 15), control1: CGPoint(x: 11.556, y: 14.95), control2: CGPoint(x: 11.38, y: 15)) p.addLine(to: CGPoint(x: 10.5, y: 15)) p.addCurve(to: CGPoint(x: 9.921, y: 14.867), control1: CGPoint(x: 10.304, y: 15), control2: CGPoint(x: 10.111, y: 14.956)) p.addCurve(to: CGPoint(x: 9.459, y: 14.541), control1: CGPoint(x: 9.751, y: 14.788), control2: CGPoint(x: 9.597, y: 14.679)) p.addCurve(to: CGPoint(x: 9.133, y: 14.079), control1: CGPoint(x: 9.321, y: 14.403), control2: CGPoint(x: 9.212, y: 14.249)) p.addCurve(to: CGPoint(x: 9, y: 13.5), control1: CGPoint(x: 9.044, y: 13.889), control2: CGPoint(x: 9, y: 13.696)) p.addLine(to: CGPoint(x: 9, y: 13)) p.addLine(to: CGPoint(x: 8.309, y: 13)) p.addCurve(to: CGPoint(x: 7.853, y: 12.89), control1: CGPoint(x: 8.148, y: 13), control2: CGPoint(x: 7.996, y: 12.963)) p.addCurve(to: CGPoint(x: 7.458, y: 12.526), control1: CGPoint(x: 7.688, y: 12.805), control2: CGPoint(x: 7.556, y: 12.684)) p.addCurve(to: CGPoint(x: 7.309, y: 12.01), control1: CGPoint(x: 7.361, y: 12.368), control2: CGPoint(x: 7.311, y: 12.196)) p.addCurve(to: CGPoint(x: 7.415, y: 11.553), control1: CGPoint(x: 7.307, y: 11.849), control2: CGPoint(x: 7.343, y: 11.697)) p.addLine(to: CGPoint(x: 8.915, y: 8.553)) p.addCurve(to: CGPoint(x: 9.283, y: 8.149), control1: CGPoint(x: 8.999, y: 8.383), control2: CGPoint(x: 9.122, y: 8.249)) p.addCurve(to: CGPoint(x: 9.809, y: 8), control1: CGPoint(x: 9.444, y: 8.05), control2: CGPoint(x: 9.62, y: 8)) p.addLine(to: CGPoint(x: 14, y: 8)) p.addCurve(to: CGPoint(x: 14.707, y: 8.293), control1: CGPoint(x: 14.276, y: 8), control2: CGPoint(x: 14.512, y: 8.098)) p.addCurve(to: CGPoint(x: 15, y: 9), control1: CGPoint(x: 14.902, y: 8.488), control2: CGPoint(x: 15, y: 8.724)) p.addLine(to: CGPoint(x: 15, y: 12)) p.addCurve(to: CGPoint(x: 14.707, y: 12.707), control1: CGPoint(x: 15, y: 12.276), control2: CGPoint(x: 14.902, y: 12.512)) p.addCurve(to: CGPoint(x: 14, y: 13), control1: CGPoint(x: 14.512, y: 12.902), control2: CGPoint(x: 14.276, y: 13)) p.addLine(to: CGPoint(x: 12.809, y: 13)) p.addLine(to: CGPoint(x: 12.085, y: 14.447)) p.closeSubpath() p.move(to: CGPoint(x: 9, y: 12)) p.addCurve(to: CGPoint(x: 9.707, y: 12.293), control1: CGPoint(x: 9.276, y: 12), control2: CGPoint(x: 9.512, y: 12.098)) p.addCurve(to: CGPoint(x: 10, y: 13), control1: CGPoint(x: 9.902, y: 12.488), control2: CGPoint(x: 10, y: 12.724)) p.addLine(to: CGPoint(x: 10, y: 13.5)) p.addCurve(to: CGPoint(x: 10.166, y: 13.834), control1: CGPoint(x: 10, y: 13.612), control2: CGPoint(x: 10.055, y: 13.723)) p.addCurve(to: CGPoint(x: 10.5, y: 14), control1: CGPoint(x: 10.277, y: 13.945), control2: CGPoint(x: 10.388, y: 14)) p.addLine(to: CGPoint(x: 11.191, y: 14)) p.addLine(to: CGPoint(x: 11.915, y: 12.553)) p.addCurve(to: CGPoint(x: 12, y: 12.411), control1: CGPoint(x: 11.94, y: 12.503), control2: CGPoint(x: 11.968, y: 12.455)) p.addLine(to: CGPoint(x: 12, y: 9)) p.addLine(to: CGPoint(x: 9.809, y: 9)) p.addLine(to: CGPoint(x: 8.309, y: 12)) p.addLine(to: CGPoint(x: 9, y: 12)) p.closeSubpath() p.move(to: CGPoint(x: 13, y: 12)) p.addLine(to: CGPoint(x: 14, y: 12)) p.addLine(to: CGPoint(x: 14, y: 9)) p.addLine(to: CGPoint(x: 13, y: 9)) p.addLine(to: CGPoint(x: 13, y: 12)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ThumbsUpDownIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "thumbs-up-down" (line-round), MIT. https://gentleface.com/icons/thumbs-up-down 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 ThumbsUpDownIcon: ImageVector by lazy { ImageVector.Builder( name = "thumbs-up-down", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M3.915 1.553C3.999 1.383 4.122 1.249 4.283 1.149C4.444 1.05 4.62 1 4.809 1L5.5 1C5.696 1 5.889 1.044 6.079 1.133C6.249 1.212 6.403 1.321 6.541 1.459C6.679 1.597 6.788 1.751 6.867 1.921C6.956 2.111 7 2.304 7 2.5L7 3L7.691 3C7.852 3 8.004 3.037 8.147 3.11C8.312 3.195 8.444 3.316 8.542 3.474C8.639 3.632 8.689 3.804 8.691 3.99C8.693 4.151 8.657 4.303 8.585 4.447L7.085 7.447C7.001 7.617 6.878 7.751 6.717 7.851C6.556 7.95 6.38 8 6.191 8L2 8C1.724 8 1.488 7.902 1.293 7.707C1.098 7.512 1 7.276 1 7L1 4C1 3.724 1.098 3.488 1.293 3.293C1.488 3.098 1.724 3 2 3L3.191 3L3.915 1.553ZM7.691 4L7 4C6.724 4 6.488 3.902 6.293 3.707C6.098 3.512 6 3.276 6 3L6 2.5C6 2.388 5.945 2.277 5.834 2.166C5.723 2.055 5.612 2 5.5 2L4.809 2L4.085 3.447C4.06 3.497 4.032 3.545 4 3.589L4 7L6.191 7L7.691 4ZM3 7L3 4L2 4L2 7L3 7ZM12.085 14.447C12.001 14.617 11.878 14.751 11.717 14.851C11.556 14.95 11.38 15 11.191 15L10.5 15C10.304 15 10.111 14.956 9.921 14.867C9.751 14.788 9.597 14.679 9.459 14.541C9.321 14.403 9.212 14.249 9.133 14.079C9.044 13.889 9 13.696 9 13.5L9 13L8.309 13C8.148 13 7.996 12.963 7.853 12.89C7.688 12.805 7.556 12.684 7.458 12.526C7.361 12.368 7.311 12.196 7.309 12.01C7.307 11.849 7.343 11.697 7.415 11.553L8.915 8.553C8.999 8.383 9.122 8.249 9.283 8.149C9.444 8.05 9.62 8 9.809 8L14 8C14.276 8 14.512 8.098 14.707 8.293C14.902 8.488 15 8.724 15 9L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L12.809 13L12.085 14.447ZM9 12C9.276 12 9.512 12.098 9.707 12.293C9.902 12.488 10 12.724 10 13L10 13.5C10 13.612 10.055 13.723 10.166 13.834C10.277 13.945 10.388 14 10.5 14L11.191 14L11.915 12.553C11.94 12.503 11.968 12.455 12 12.411L12 9L9.809 9L8.309 12L9 12ZM13 12L14 12L14 9L13 9L13 12Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ThumbsUpDownIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "thumbs-up-down" (line-round), MIT. https://gentleface.com/icons/thumbs-up-down import 'package:flutter/widgets.dart'; class ThumbsUpDownIcon extends StatelessWidget { const ThumbsUpDownIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ThumbsUpDownIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ThumbsUpDownIconPainter extends CustomPainter { _ThumbsUpDownIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(3.915, 1.553) ..cubicTo(3.999, 1.383, 4.122, 1.249, 4.283, 1.149) ..cubicTo(4.444, 1.05, 4.62, 1, 4.809, 1) ..lineTo(5.5, 1) ..cubicTo(5.696, 1, 5.889, 1.044, 6.079, 1.133) ..cubicTo(6.249, 1.212, 6.403, 1.321, 6.541, 1.459) ..cubicTo(6.679, 1.597, 6.788, 1.751, 6.867, 1.921) ..cubicTo(6.956, 2.111, 7, 2.304, 7, 2.5) ..lineTo(7, 3) ..lineTo(7.691, 3) ..cubicTo(7.852, 3, 8.004, 3.037, 8.147, 3.11) ..cubicTo(8.312, 3.195, 8.444, 3.316, 8.542, 3.474) ..cubicTo(8.639, 3.632, 8.689, 3.804, 8.691, 3.99) ..cubicTo(8.693, 4.151, 8.657, 4.303, 8.585, 4.447) ..lineTo(7.085, 7.447) ..cubicTo(7.001, 7.617, 6.878, 7.751, 6.717, 7.851) ..cubicTo(6.556, 7.95, 6.38, 8, 6.191, 8) ..lineTo(2, 8) ..cubicTo(1.724, 8, 1.488, 7.902, 1.293, 7.707) ..cubicTo(1.098, 7.512, 1, 7.276, 1, 7) ..lineTo(1, 4) ..cubicTo(1, 3.724, 1.098, 3.488, 1.293, 3.293) ..cubicTo(1.488, 3.098, 1.724, 3, 2, 3) ..lineTo(3.191, 3) ..lineTo(3.915, 1.553) ..close() ..moveTo(7.691, 4) ..lineTo(7, 4) ..cubicTo(6.724, 4, 6.488, 3.902, 6.293, 3.707) ..cubicTo(6.098, 3.512, 6, 3.276, 6, 3) ..lineTo(6, 2.5) ..cubicTo(6, 2.388, 5.945, 2.277, 5.834, 2.166) ..cubicTo(5.723, 2.055, 5.612, 2, 5.5, 2) ..lineTo(4.809, 2) ..lineTo(4.085, 3.447) ..cubicTo(4.06, 3.497, 4.032, 3.545, 4, 3.589) ..lineTo(4, 7) ..lineTo(6.191, 7) ..lineTo(7.691, 4) ..close() ..moveTo(3, 7) ..lineTo(3, 4) ..lineTo(2, 4) ..lineTo(2, 7) ..lineTo(3, 7) ..close() ..moveTo(12.085, 14.447) ..cubicTo(12.001, 14.617, 11.878, 14.751, 11.717, 14.851) ..cubicTo(11.556, 14.95, 11.38, 15, 11.191, 15) ..lineTo(10.5, 15) ..cubicTo(10.304, 15, 10.111, 14.956, 9.921, 14.867) ..cubicTo(9.751, 14.788, 9.597, 14.679, 9.459, 14.541) ..cubicTo(9.321, 14.403, 9.212, 14.249, 9.133, 14.079) ..cubicTo(9.044, 13.889, 9, 13.696, 9, 13.5) ..lineTo(9, 13) ..lineTo(8.309, 13) ..cubicTo(8.148, 13, 7.996, 12.963, 7.853, 12.89) ..cubicTo(7.688, 12.805, 7.556, 12.684, 7.458, 12.526) ..cubicTo(7.361, 12.368, 7.311, 12.196, 7.309, 12.01) ..cubicTo(7.307, 11.849, 7.343, 11.697, 7.415, 11.553) ..lineTo(8.915, 8.553) ..cubicTo(8.999, 8.383, 9.122, 8.249, 9.283, 8.149) ..cubicTo(9.444, 8.05, 9.62, 8, 9.809, 8) ..lineTo(14, 8) ..cubicTo(14.276, 8, 14.512, 8.098, 14.707, 8.293) ..cubicTo(14.902, 8.488, 15, 8.724, 15, 9) ..lineTo(15, 12) ..cubicTo(15, 12.276, 14.902, 12.512, 14.707, 12.707) ..cubicTo(14.512, 12.902, 14.276, 13, 14, 13) ..lineTo(12.809, 13) ..lineTo(12.085, 14.447) ..close() ..moveTo(9, 12) ..cubicTo(9.276, 12, 9.512, 12.098, 9.707, 12.293) ..cubicTo(9.902, 12.488, 10, 12.724, 10, 13) ..lineTo(10, 13.5) ..cubicTo(10, 13.612, 10.055, 13.723, 10.166, 13.834) ..cubicTo(10.277, 13.945, 10.388, 14, 10.5, 14) ..lineTo(11.191, 14) ..lineTo(11.915, 12.553) ..cubicTo(11.94, 12.503, 11.968, 12.455, 12, 12.411) ..lineTo(12, 9) ..lineTo(9.809, 9) ..lineTo(8.309, 12) ..lineTo(9, 12) ..close() ..moveTo(13, 12) ..lineTo(14, 12) ..lineTo(14, 9) ..lineTo(13, 9) ..lineTo(13, 12) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ThumbsUpDownIconPainter old) => old.color != color; } ```