thumbs-up-two-tone from Keyline Icons by Keyline Icons · Two Tone · MIT Free for personal and commercial use.

Name
thumbs-up-two-tone
Set
Keyline Icons
Style
Two Tone
Viewbox
24×24
License
MIT

7 other variants in Keyline Icons

The same icon in other sets

Related icons in Keyline Icons

Use the thumbs up icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path fill="currentColor" fill-opacity=".4" d="M4 9L7.2192 9L8.6511 3.2724C8.985 1.9369 10.1849 1 11.5616 1L13.2344 1C14.7474 1 16.0236 2.1266 16.2113 3.6279L16.8828 9L20 9C21.6569 9 23 10.3431 23 12C23 12.3597 22.9353 12.7165 22.809 13.0534L19.809 21.0534C19.3699 22.2243 18.2505 23 17 23L4 23C2.3431 23 1 21.6569 1 20L1 12C1 10.3431 2.3431 9 4 9Z" stroke="none"/><path d="M4 10L8 10L9.6213 3.5149C9.8439 2.6246 10.6438 2 11.5616 2L13.2344 2C14.2431 2 15.0939 2.7511 15.219 3.7519L16 10L20 10C21.1046 10 22 10.8954 22 12C22 12.2398 21.9569 12.4777 21.8727 12.7022L18.8727 20.7022C18.5799 21.4829 17.8337 22 17 22L4 22C2.8954 22 2 21.1046 2 20L2 12C2 10.8954 2.8954 10 4 10ZM8 10L8 22"/></g></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsThumbsUpTwoTone(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"><path fill="currentColor" fillOpacity=".4" d="M4 9L7.2192 9L8.6511 3.2724C8.985 1.9369 10.1849 1 11.5616 1L13.2344 1C14.7474 1 16.0236 2.1266 16.2113 3.6279L16.8828 9L20 9C21.6569 9 23 10.3431 23 12C23 12.3597 22.9353 12.7165 22.809 13.0534L19.809 21.0534C19.3699 22.2243 18.2505 23 17 23L4 23C2.3431 23 1 21.6569 1 20L1 12C1 10.3431 2.3431 9 4 9Z" stroke="none"/><path d="M4 10L8 10L9.6213 3.5149C9.8439 2.6246 10.6438 2 11.5616 2L13.2344 2C14.2431 2 15.0939 2.7511 15.219 3.7519L16 10L20 10C21.1046 10 22 10.8954 22 12C22 12.2398 21.9569 12.4777 21.8727 12.7022L18.8727 20.7022C18.5799 21.4829 17.8337 22 17 22L4 22C2.8954 22 2 21.1046 2 20L2 12C2 10.8954 2.8954 10 4 10ZM8 10L8 22"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path fill="currentColor" fill-opacity=".4" d="M4 9L7.2192 9L8.6511 3.2724C8.985 1.9369 10.1849 1 11.5616 1L13.2344 1C14.7474 1 16.0236 2.1266 16.2113 3.6279L16.8828 9L20 9C21.6569 9 23 10.3431 23 12C23 12.3597 22.9353 12.7165 22.809 13.0534L19.809 21.0534C19.3699 22.2243 18.2505 23 17 23L4 23C2.3431 23 1 21.6569 1 20L1 12C1 10.3431 2.3431 9 4 9Z" stroke="none"/><path d="M4 10L8 10L9.6213 3.5149C9.8439 2.6246 10.6438 2 11.5616 2L13.2344 2C14.2431 2 15.0939 2.7511 15.219 3.7519L16 10L20 10C21.1046 10 22 10.8954 22 12C22 12.2398 21.9569 12.4777 21.8727 12.7022L18.8727 20.7022C18.5799 21.4829 17.8337 22 17 22L4 22C2.8954 22 2 21.1046 2 20L2 12C2 10.8954 2.8954 10 4 10ZM8 10L8 22"/></g></svg>
</template>

CSS

.icon-thumbs-up-two-tone {
  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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-opacity%3D%22.4%22%20d%3D%22M4%209L7.2192%209L8.6511%203.2724C8.985%201.9369%2010.1849%201%2011.5616%201L13.2344%201C14.7474%201%2016.0236%202.1266%2016.2113%203.6279L16.8828%209L20%209C21.6569%209%2023%2010.3431%2023%2012C23%2012.3597%2022.9353%2012.7165%2022.809%2013.0534L19.809%2021.0534C19.3699%2022.2243%2018.2505%2023%2017%2023L4%2023C2.3431%2023%201%2021.6569%201%2020L1%2012C1%2010.3431%202.3431%209%204%209Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%2010L8%2010L9.6213%203.5149C9.8439%202.6246%2010.6438%202%2011.5616%202L13.2344%202C14.2431%202%2015.0939%202.7511%2015.219%203.7519L16%2010L20%2010C21.1046%2010%2022%2010.8954%2022%2012C22%2012.2398%2021.9569%2012.4777%2021.8727%2012.7022L18.8727%2020.7022C18.5799%2021.4829%2017.8337%2022%2017%2022L4%2022C2.8954%2022%202%2021.1046%202%2020L2%2012C2%2010.8954%202.8954%2010%204%2010ZM8%2010L8%2022%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-opacity%3D%22.4%22%20d%3D%22M4%209L7.2192%209L8.6511%203.2724C8.985%201.9369%2010.1849%201%2011.5616%201L13.2344%201C14.7474%201%2016.0236%202.1266%2016.2113%203.6279L16.8828%209L20%209C21.6569%209%2023%2010.3431%2023%2012C23%2012.3597%2022.9353%2012.7165%2022.809%2013.0534L19.809%2021.0534C19.3699%2022.2243%2018.2505%2023%2017%2023L4%2023C2.3431%2023%201%2021.6569%201%2020L1%2012C1%2010.3431%202.3431%209%204%209Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%2010L8%2010L9.6213%203.5149C9.8439%202.6246%2010.6438%202%2011.5616%202L13.2344%202C14.2431%202%2015.0939%202.7511%2015.219%203.7519L16%2010L20%2010C21.1046%2010%2022%2010.8954%2022%2012C22%2012.2398%2021.9569%2012.4777%2021.8727%2012.7022L18.8727%2020.7022C18.5799%2021.4829%2017.8337%2022%2017%2022L4%2022C2.8954%2022%202%2021.1046%202%2020L2%2012C2%2010.8954%202.8954%2010%204%2010ZM8%2010L8%2022%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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