thumbs up icon
thumbs-up-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.
- Name
- thumbs-up-outline
- Set
- IonIcons
- Style
- Outline
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
thumbs-upAkar Iconsthumbs-upCarbonthumbs-upEmoji One (Colored)thumbs-upFont Awesome 6 Regularthumbs-upFont Awesome 6 Solidthumbs-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-upLine Awesomethumbs-upMaterial Line Iconsthumbs-upLucidethumbs-upMage Iconsthumbs-upNoto Emojithumbs-upOpenMoji
Related icons in IonIcons
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="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 458.16S304 464 256 464s-74-16-96-32H96a64 64 0 0 1-64-64v-48a64 64 0 0 1 64-64h30a32.34 32.34 0 0 0 27.37-15.4S162 221.81 188 176.78S264 64 272 48c29 0 43 22 34 47.71c-10.28 29.39-23.71 54.38-27.46 87.09c-.54 4.78 3.14 12 7.95 12L416 205"/><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="m416 271l-80-2c-20-1.84-32-12.4-32-30s14-28.84 32-30l80-4c17.6 0 32 16.4 32 34v.17A32 32 0 0 1 416 271Zm32 65l-112-2c-18-.84-32-12.41-32-30c0-17.61 14-28.86 32-30l112-2a32.1 32.1 0 0 1 32 32a32.1 32.1 0 0 1-32 32Zm-48 128l-64-3c-21-1.84-32-11.4-32-29s14.4-30 32-30l64-2a32.09 32.09 0 0 1 32 32a32.09 32.09 0 0 1-32 32Zm32-64l-96-2c-19-.84-32-12.4-32-30s13-28.84 32-30l96-2a32.09 32.09 0 0 1 32 32a32.09 32.09 0 0 1-32 32Z"/></svg>
React
import type { SVGProps } from "react";
export function IonThumbsUpOutline(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="32" d="M320 458.16S304 464 256 464s-74-16-96-32H96a64 64 0 0 1-64-64v-48a64 64 0 0 1 64-64h30a32.34 32.34 0 0 0 27.37-15.4S162 221.81 188 176.78S264 64 272 48c29 0 43 22 34 47.71c-10.28 29.39-23.71 54.38-27.46 87.09c-.54 4.78 3.14 12 7.95 12L416 205"/><path fill="none" stroke="currentColor" strokeMiterlimit="10" strokeWidth="32" d="m416 271l-80-2c-20-1.84-32-12.4-32-30s14-28.84 32-30l80-4c17.6 0 32 16.4 32 34v.17A32 32 0 0 1 416 271Zm32 65l-112-2c-18-.84-32-12.41-32-30c0-17.61 14-28.86 32-30l112-2a32.1 32.1 0 0 1 32 32a32.1 32.1 0 0 1-32 32Zm-48 128l-64-3c-21-1.84-32-11.4-32-29s14.4-30 32-30l64-2a32.09 32.09 0 0 1 32 32a32.09 32.09 0 0 1-32 32Zm32-64l-96-2c-19-.84-32-12.4-32-30s13-28.84 32-30l96-2a32.09 32.09 0 0 1 32 32a32.09 32.09 0 0 1-32 32Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 458.16S304 464 256 464s-74-16-96-32H96a64 64 0 0 1-64-64v-48a64 64 0 0 1 64-64h30a32.34 32.34 0 0 0 27.37-15.4S162 221.81 188 176.78S264 64 272 48c29 0 43 22 34 47.71c-10.28 29.39-23.71 54.38-27.46 87.09c-.54 4.78 3.14 12 7.95 12L416 205"/><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="m416 271l-80-2c-20-1.84-32-12.4-32-30s14-28.84 32-30l80-4c17.6 0 32 16.4 32 34v.17A32 32 0 0 1 416 271Zm32 65l-112-2c-18-.84-32-12.41-32-30c0-17.61 14-28.86 32-30l112-2a32.1 32.1 0 0 1 32 32a32.1 32.1 0 0 1-32 32Zm-48 128l-64-3c-21-1.84-32-11.4-32-29s14.4-30 32-30l64-2a32.09 32.09 0 0 1 32 32a32.09 32.09 0 0 1-32 32Zm32-64l-96-2c-19-.84-32-12.4-32-30s13-28.84 32-30l96-2a32.09 32.09 0 0 1 32 32a32.09 32.09 0 0 1-32 32Z"/></svg> </template>
CSS
.icon-thumbs-up-outline {
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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M320%20458.16S304%20464%20256%20464s-74-16-96-32H96a64%2064%200%200%201-64-64v-48a64%2064%200%200%201%2064-64h30a32.34%2032.34%200%200%200%2027.37-15.4S162%20221.81%20188%20176.78S264%2064%20272%2048c29%200%2043%2022%2034%2047.71c-10.28%2029.39-23.71%2054.38-27.46%2087.09c-.54%204.78%203.14%2012%207.95%2012L416%20205%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22m416%20271l-80-2c-20-1.84-32-12.4-32-30s14-28.84%2032-30l80-4c17.6%200%2032%2016.4%2032%2034v.17A32%2032%200%200%201%20416%20271Zm32%2065l-112-2c-18-.84-32-12.41-32-30c0-17.61%2014-28.86%2032-30l112-2a32.1%2032.1%200%200%201%2032%2032a32.1%2032.1%200%200%201-32%2032Zm-48%20128l-64-3c-21-1.84-32-11.4-32-29s14.4-30%2032-30l64-2a32.09%2032.09%200%200%201%2032%2032a32.09%2032.09%200%200%201-32%2032Zm32-64l-96-2c-19-.84-32-12.4-32-30s13-28.84%2032-30l96-2a32.09%2032.09%200%200%201%2032%2032a32.09%2032.09%200%200%201-32%2032Z%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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M320%20458.16S304%20464%20256%20464s-74-16-96-32H96a64%2064%200%200%201-64-64v-48a64%2064%200%200%201%2064-64h30a32.34%2032.34%200%200%200%2027.37-15.4S162%20221.81%20188%20176.78S264%2064%20272%2048c29%200%2043%2022%2034%2047.71c-10.28%2029.39-23.71%2054.38-27.46%2087.09c-.54%204.78%203.14%2012%207.95%2012L416%20205%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22m416%20271l-80-2c-20-1.84-32-12.4-32-30s14-28.84%2032-30l80-4c17.6%200%2032%2016.4%2032%2034v.17A32%2032%200%200%201%20416%20271Zm32%2065l-112-2c-18-.84-32-12.41-32-30c0-17.61%2014-28.86%2032-30l112-2a32.1%2032.1%200%200%201%2032%2032a32.1%2032.1%200%200%201-32%2032Zm-48%20128l-64-3c-21-1.84-32-11.4-32-29s14.4-30%2032-30l64-2a32.09%2032.09%200%200%201%2032%2032a32.09%2032.09%200%200%201-32%2032Zm32-64l-96-2c-19-.84-32-12.4-32-30s13-28.84%2032-30l96-2a32.09%2032.09%200%200%201%2032%2032a32.09%2032.09%200%200%201-32%2032Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/thumbs-up-outline.svg?color=%231a73e8&size=48
