gentleface

Gentleface › Social & emotions › thumbs-down

thumbs-down icon

Thumbs down: dislike, downvote, not helpful, unhelpful. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

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="M1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1L11.573 1C11.952 1 12.302 1.1 12.624 1.299C12.947 1.498 13.192 1.767 13.362 2.106L14.5 4.382C14.833 5.049 15 5.755 15 6.5L15 8C15 8.276 14.902 8.512 14.707 8.707C14.512 8.902 14.276 9 14 9L11 9L11 11.5C11 11.806 10.932 12.117 10.795 12.433C10.678 12.703 10.52 12.957 10.322 13.195C10.134 13.42 9.935 13.603 9.723 13.744C9.467 13.915 9.226 14 9 14C8.813 14 8.667 13.994 8.563 13.981C8.367 13.956 8.189 13.903 8.026 13.822C7.649 13.634 7.325 13.267 7.053 12.724L5.191 9L3 9C2.746 9 2.5 8.953 2.264 8.86C2.007 8.758 1.781 8.609 1.586 8.414C1.391 8.219 1.242 7.993 1.14 7.736C1.047 7.5 1 7.254 1 7L1 3C1 2.746 1.047 2.5 1.14 2.264ZM2.293 7.707C2.488 7.902 2.724 8 3 8L4 8L4 2L3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 7C2 7.276 2.098 7.512 2.293 7.707ZM5.717 8.149C5.878 8.249 6.001 8.383 6.085 8.553L7.947 12.276C8.12 12.621 8.295 12.839 8.474 12.928C8.534 12.958 8.605 12.978 8.687 12.988C8.749 12.996 8.851 13 8.993 13L8.993 13C9.002 12.998 9.013 12.994 9.026 12.989C9.068 12.973 9.115 12.947 9.168 12.912C9.3 12.824 9.428 12.705 9.553 12.555C9.691 12.39 9.798 12.217 9.877 12.036C9.959 11.847 10 11.668 10 11.5L10 9C10 8.724 10.098 8.488 10.293 8.293C10.488 8.098 10.724 8 11 8L14 8L14 6.5C14 5.912 13.869 5.355 13.606 4.829L12.467 2.553C12.383 2.383 12.26 2.249 12.099 2.149C11.938 2.05 11.762 2 11.573 2L5 2L5 8L5.191 8C5.38 8 5.556 8.05 5.717 8.149Z"/></svg>
React
// Gentleface "thumbs-down" (line-round), MIT. https://gentleface.com/icons/thumbs-down
import type { SVGProps } from 'react';

export function ThumbsDownIcon(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="M1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1L11.573 1C11.952 1 12.302 1.1 12.624 1.299C12.947 1.498 13.192 1.767 13.362 2.106L14.5 4.382C14.833 5.049 15 5.755 15 6.5L15 8C15 8.276 14.902 8.512 14.707 8.707C14.512 8.902 14.276 9 14 9L11 9L11 11.5C11 11.806 10.932 12.117 10.795 12.433C10.678 12.703 10.52 12.957 10.322 13.195C10.134 13.42 9.935 13.603 9.723 13.744C9.467 13.915 9.226 14 9 14C8.813 14 8.667 13.994 8.563 13.981C8.367 13.956 8.189 13.903 8.026 13.822C7.649 13.634 7.325 13.267 7.053 12.724L5.191 9L3 9C2.746 9 2.5 8.953 2.264 8.86C2.007 8.758 1.781 8.609 1.586 8.414C1.391 8.219 1.242 7.993 1.14 7.736C1.047 7.5 1 7.254 1 7L1 3C1 2.746 1.047 2.5 1.14 2.264ZM2.293 7.707C2.488 7.902 2.724 8 3 8L4 8L4 2L3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 7C2 7.276 2.098 7.512 2.293 7.707ZM5.717 8.149C5.878 8.249 6.001 8.383 6.085 8.553L7.947 12.276C8.12 12.621 8.295 12.839 8.474 12.928C8.534 12.958 8.605 12.978 8.687 12.988C8.749 12.996 8.851 13 8.993 13L8.993 13C9.002 12.998 9.013 12.994 9.026 12.989C9.068 12.973 9.115 12.947 9.168 12.912C9.3 12.824 9.428 12.705 9.553 12.555C9.691 12.39 9.798 12.217 9.877 12.036C9.959 11.847 10 11.668 10 11.5L10 9C10 8.724 10.098 8.488 10.293 8.293C10.488 8.098 10.724 8 11 8L14 8L14 6.5C14 5.912 13.869 5.355 13.606 4.829L12.467 2.553C12.383 2.383 12.26 2.249 12.099 2.149C11.938 2.05 11.762 2 11.573 2L5 2L5 8L5.191 8C5.38 8 5.556 8.05 5.717 8.149Z" />
    </svg>
  );
}
Vue
Vue: see /icons/thumbs-down.md
Svelte
Svelte: see /icons/thumbs-down.md
HTML img
HTML img: see /icons/thumbs-down.md
CSS
CSS: see /icons/thumbs-down.md
Data URL
Data URL: see /icons/thumbs-down.md
Sprite
Sprite: see /icons/thumbs-down.md
SwiftUI
SwiftUI: see /icons/thumbs-down.md
Compose
Compose: see /icons/thumbs-down.md
Android XML
Android XML: see /icons/thumbs-down.md
Flutter
Flutter: see /icons/thumbs-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.

Meaning

Use it for
dislike, downvote, not helpful, unhelpful
Alternatives
  • heart-off: remove a like (unlike)
  • frown: negative sentiment on a face scale
Also fits
  • negative feedback: binary not-helpful feedback
Not for
  • reject (use x-circle): dislike or not-helpful feedback, not reject
Tags
dislike, thumb, bad, disagree, vote, downvote, reject
Category
Social & emotions
Component name
ThumbsDownIcon
History
  • added

Family 1

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-down.json · Markdown: /icons/thumbs-down.md · SVG: https://gentleface.com/svg/{style}/16/thumbs-down.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/thumbs-down.png

Feedback