thumbs up icon

thumbs-up from Font Awesome 6 Solid by Dave Gandy · Regular · Hands · CC-BY-4.0 Attribution required.

Name
thumbs-up
Set
Font Awesome 6 Solid
Style
Regular
Category
Hands
Viewbox
512×512
License
CC BY 4.0

The same icon in other sets

thumbs-upAkar Iconsthumbs-upCarbonthumbs-upEmoji One (Colored)thumbs-upFont Awesome 6 Regularthumbs-upFont Awesome Regularthumbs-upFont Awesome Solidthumbs-upFeather Iconsthumbs-up-outlineFlowbite Iconsthumbs-upFluent Emojithumbs-upFluent Emoji Flatthumbs-upFluent Emoji High Contrastthumbs-upHuge Iconsthumbs-upIconParkthumbs-upIconPark Outlinethumbs-upIconPark Solidthumbs-upIconPark TwoTonethumbs-upIconoirthumbs-upIonIconsthumbs-upLine Awesomethumbs-upMaterial Line Iconsthumbs-upLucidethumbs-upMage Iconsthumbs-upNoto Emojithumbs-upOpenMoji

More hands icons from Font Awesome 6 Solid

hand-holdinghand-holding-medicalhand-lizardhand-middle-fingerhand-peacehand-scissorshand-sparkleshand-spockhandshandshake-slashthumbs-down

Use the thumbs up icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2h144c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48h-97.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7M32 192h64c17.7 0 32 14.3 32 32v224c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidThumbsUp(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2h144c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48h-97.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7M32 192h64c17.7 0 32 14.3 32 32v224c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2h144c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48h-97.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7M32 192h64c17.7 0 32 14.3 32 32v224c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32"/></svg>
</template>

CSS

.icon-thumbs-up {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M313.4%2032.9c26%205.2%2042.9%2030.5%2037.7%2056.5l-2.3%2011.4c-5.3%2026.7-15.1%2052.1-28.8%2075.2h144c26.5%200%2048%2021.5%2048%2048c0%2018.5-10.5%2034.6-25.9%2042.6C497%20275.4%20504%20288.9%20504%20304c0%2023.4-16.8%2042.9-38.9%2047.1c4.4%207.3%206.9%2015.8%206.9%2024.9c0%2021.3-13.9%2039.4-33.1%2045.6c.7%203.3%201.1%206.8%201.1%2010.4c0%2026.5-21.5%2048-48%2048h-97.5c-19%200-37.5-5.6-53.3-16.1l-38.5-25.7C176%20420.4%20160%20390.4%20160%20358.3V247.1c0-29.2%2013.3-56.7%2036-75l7.4-5.9c26.5-21.2%2044.6-51%2051.2-84.2l2.3-11.4c5.2-26%2030.5-42.9%2056.5-37.7M32%20192h64c17.7%200%2032%2014.3%2032%2032v224c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32V224c0-17.7%2014.3-32%2032-32%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M313.4%2032.9c26%205.2%2042.9%2030.5%2037.7%2056.5l-2.3%2011.4c-5.3%2026.7-15.1%2052.1-28.8%2075.2h144c26.5%200%2048%2021.5%2048%2048c0%2018.5-10.5%2034.6-25.9%2042.6C497%20275.4%20504%20288.9%20504%20304c0%2023.4-16.8%2042.9-38.9%2047.1c4.4%207.3%206.9%2015.8%206.9%2024.9c0%2021.3-13.9%2039.4-33.1%2045.6c.7%203.3%201.1%206.8%201.1%2010.4c0%2026.5-21.5%2048-48%2048h-97.5c-19%200-37.5-5.6-53.3-16.1l-38.5-25.7C176%20420.4%20160%20390.4%20160%20358.3V247.1c0-29.2%2013.3-56.7%2036-75l7.4-5.9c26.5-21.2%2044.6-51%2051.2-84.2l2.3-11.4c5.2-26%2030.5-42.9%2056.5-37.7M32%20192h64c17.7%200%2032%2014.3%2032%2032v224c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32V224c0-17.7%2014.3-32%2032-32%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/thumbs-up.svg?color=%231a73e8&size=48