Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

VS Code Icons · VscThumbsdown

Thumbsdown icon

A free thumbsdown icon from VS Code Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License
CC BY 4.0 license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/thumbsdown.json
components/icons/vscode-codicons-thumbsdown.tsx
import * as React from "react";

/**
 * Thumbsdown from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/thumbsdown. Sized in em, colored by currentColor.
 */
export function VscThumbsdownIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M13 1H4.838C3.274 1 2.717 2.202 2.435 3.105L1.092 7.404C1.031 7.6 1 7.801 1 8.002C1 9.104 1.897 10 3.001 10H5.328L4.794 11.781C4.723 12.016 4.687 12.26 4.687 12.504C4.687 13.88 5.809 15.001 7.189 15.001C7.571 15.001 7.915 14.789 8.087 14.446L10.171 10.277C10.256 10.107 10.427 10.001 10.618 10.001H13C14.103 10.001 15 9.104 15 8.001V3C15 1.897 14.103 1 13 1ZM9.276 9.829L7.193 13.996L7.188 13.999C6.36 13.999 5.686 13.328 5.686 12.502C5.686 12.356 5.707 12.21 5.75 12.067L6.478 9.642C6.524 9.491 6.495 9.327 6.401 9.2C6.306 9.073 6.158 8.998 6 8.998H3.001C2.449 8.998 2 8.551 2 8C2 7.9 2.016 7.799 2.047 7.699L3.39 3.401C3.753 2.236 4.232 1.998 4.838 1.998H11V8.998H10.618C10.046 8.998 9.531 9.316 9.276 9.827V9.829ZM14 8C14 8.551 13.552 9 13 9H12V2H13C13.552 2 14 2.449 14 3V8Z"
      />
    </svg>
  );
}
With react-icons
import { VscThumbsdown } from "react-icons/vsc";

export function Example() {
  return <VscThumbsdown className="size-5" />;
}
thumbsdown.svg
<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M13 1H4.838C3.274 1 2.717 2.202 2.435 3.105L1.092 7.404C1.031 7.6 1 7.801 1 8.002C1 9.104 1.897 10 3.001 10H5.328L4.794 11.781C4.723 12.016 4.687 12.26 4.687 12.504C4.687 13.88 5.809 15.001 7.189 15.001C7.571 15.001 7.915 14.789 8.087 14.446L10.171 10.277C10.256 10.107 10.427 10.001 10.618 10.001H13C14.103 10.001 15 9.104 15 8.001V3C15 1.897 14.103 1 13 1ZM9.276 9.829L7.193 13.996L7.188 13.999C6.36 13.999 5.686 13.328 5.686 12.502C5.686 12.356 5.707 12.21 5.75 12.067L6.478 9.642C6.524 9.491 6.495 9.327 6.401 9.2C6.306 9.073 6.158 8.998 6 8.998H3.001C2.449 8.998 2 8.551 2 8C2 7.9 2.016 7.799 2.047 7.699L3.39 3.401C3.753 2.236 4.232 1.998 4.838 1.998H11V8.998H10.618C10.046 8.998 9.531 9.316 9.276 9.827V9.829ZM14 8C14 8.551 13.552 9 13 9H12V2H13C13.552 2 14 2.449 14 3V8Z"
  />
</svg>
Attribution
"Thumbsdown" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons:

Thumbsdown icon in other sets