Gentleface › Social & emotions › thumbs-up-down

thumbs-up-down icon

Thumbs up down: thumbs rating, rate this, like dislike. 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="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"/></svg>

React

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

export function ThumbsUpDownIcon(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="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" />
    </svg>
  );
}

Vue

Vue: see /icons/thumbs-up-down.md

Svelte

Svelte: see /icons/thumbs-up-down.md

HTML img

HTML img: see /icons/thumbs-up-down.md

CSS

CSS: see /icons/thumbs-up-down.md

Data URL

Data URL: see /icons/thumbs-up-down.md

Sprite

Sprite: see /icons/thumbs-up-down.md

SwiftUI

SwiftUI: see /icons/thumbs-up-down.md

Compose

Compose: see /icons/thumbs-up-down.md

Android XML

Android XML: see /icons/thumbs-up-down.md

Flutter

Flutter: see /icons/thumbs-up-down.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.

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

Meaning

Use it for

thumbs rating, rate this, like dislike

Tags

thumbs, like, dislike, rating, rate, feedback, vote, up-down, approve, reject, review

Category

Social & emotions

Component name

ThumbsUpDownIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 2

thumbs-down thumbs-up

More social & emotions icons

balloon bookmark bookmark-check bookmark-off bookmark-pencil bookmark-plus bookmark-search bookmark-x bookmarks face-angry face-neutral flame frown hand-heart heart heart-check · all social & emotions icons

For agents

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

thumbs-up-down icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp