brand react icon

brand-react from Tabler Icons by Paweł Kuna · Outline · MIT Free for personal and commercial use.

Name
brand-react
Set
Tabler Icons
Style
Outline
Viewbox
24×24
License
MIT

Related icons in Tabler Icons

Use the brand react 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 d="M6.306 8.711C3.704 9.434 2 10.637 2 12c0 2.21 4.477 4 10 4c.773 0 1.526-.035 2.248-.102m3.444-.609C20.295 14.567 22 13.363 22 12c0-2.21-4.477-4-10-4c-.773 0-1.526.035-2.25.102"/><path d="M6.305 15.287C5.629 17.902 5.82 19.98 7 20.66c1.913 1.105 5.703-1.877 8.464-6.66q.581-1.007 1.036-2m1.194-3.284C18.371 6.1 18.181 4.02 17 3.34C15.087 2.235 11.297 5.217 8.536 10c-.387.67-.733 1.34-1.037 2"/><path d="M12 5.424C10.075 3.532 8.18 2.658 7 3.34C5.087 4.444 5.774 9.217 8.536 14c.386.67.793 1.304 1.212 1.896M12 18.574c1.926 1.893 3.821 2.768 5 2.086c1.913-1.104 1.226-5.877-1.536-10.66q-.563-.976-1.212-1.897M11.5 12.866a1 1 0 1 0 1-1.732a1 1 0 0 0-1 1.732"/></g></svg>

React

import type { SVGProps } from "react";

export function TablerBrandReact(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 d="M6.306 8.711C3.704 9.434 2 10.637 2 12c0 2.21 4.477 4 10 4c.773 0 1.526-.035 2.248-.102m3.444-.609C20.295 14.567 22 13.363 22 12c0-2.21-4.477-4-10-4c-.773 0-1.526.035-2.25.102"/><path d="M6.305 15.287C5.629 17.902 5.82 19.98 7 20.66c1.913 1.105 5.703-1.877 8.464-6.66q.581-1.007 1.036-2m1.194-3.284C18.371 6.1 18.181 4.02 17 3.34C15.087 2.235 11.297 5.217 8.536 10c-.387.67-.733 1.34-1.037 2"/><path d="M12 5.424C10.075 3.532 8.18 2.658 7 3.34C5.087 4.444 5.774 9.217 8.536 14c.386.67.793 1.304 1.212 1.896M12 18.574c1.926 1.893 3.821 2.768 5 2.086c1.913-1.104 1.226-5.877-1.536-10.66q-.563-.976-1.212-1.897M11.5 12.866a1 1 0 1 0 1-1.732a1 1 0 0 0-1 1.732"/></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 d="M6.306 8.711C3.704 9.434 2 10.637 2 12c0 2.21 4.477 4 10 4c.773 0 1.526-.035 2.248-.102m3.444-.609C20.295 14.567 22 13.363 22 12c0-2.21-4.477-4-10-4c-.773 0-1.526.035-2.25.102"/><path d="M6.305 15.287C5.629 17.902 5.82 19.98 7 20.66c1.913 1.105 5.703-1.877 8.464-6.66q.581-1.007 1.036-2m1.194-3.284C18.371 6.1 18.181 4.02 17 3.34C15.087 2.235 11.297 5.217 8.536 10c-.387.67-.733 1.34-1.037 2"/><path d="M12 5.424C10.075 3.532 8.18 2.658 7 3.34C5.087 4.444 5.774 9.217 8.536 14c.386.67.793 1.304 1.212 1.896M12 18.574c1.926 1.893 3.821 2.768 5 2.086c1.913-1.104 1.226-5.877-1.536-10.66q-.563-.976-1.212-1.897M11.5 12.866a1 1 0 1 0 1-1.732a1 1 0 0 0-1 1.732"/></g></svg>
</template>

CSS

.icon-brand-react {
  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%20d%3D%22M6.306%208.711C3.704%209.434%202%2010.637%202%2012c0%202.21%204.477%204%2010%204c.773%200%201.526-.035%202.248-.102m3.444-.609C20.295%2014.567%2022%2013.363%2022%2012c0-2.21-4.477-4-10-4c-.773%200-1.526.035-2.25.102%22%2F%3E%3Cpath%20d%3D%22M6.305%2015.287C5.629%2017.902%205.82%2019.98%207%2020.66c1.913%201.105%205.703-1.877%208.464-6.66q.581-1.007%201.036-2m1.194-3.284C18.371%206.1%2018.181%204.02%2017%203.34C15.087%202.235%2011.297%205.217%208.536%2010c-.387.67-.733%201.34-1.037%202%22%2F%3E%3Cpath%20d%3D%22M12%205.424C10.075%203.532%208.18%202.658%207%203.34C5.087%204.444%205.774%209.217%208.536%2014c.386.67.793%201.304%201.212%201.896M12%2018.574c1.926%201.893%203.821%202.768%205%202.086c1.913-1.104%201.226-5.877-1.536-10.66q-.563-.976-1.212-1.897M11.5%2012.866a1%201%200%201%200%201-1.732a1%201%200%200%200-1%201.732%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%20d%3D%22M6.306%208.711C3.704%209.434%202%2010.637%202%2012c0%202.21%204.477%204%2010%204c.773%200%201.526-.035%202.248-.102m3.444-.609C20.295%2014.567%2022%2013.363%2022%2012c0-2.21-4.477-4-10-4c-.773%200-1.526.035-2.25.102%22%2F%3E%3Cpath%20d%3D%22M6.305%2015.287C5.629%2017.902%205.82%2019.98%207%2020.66c1.913%201.105%205.703-1.877%208.464-6.66q.581-1.007%201.036-2m1.194-3.284C18.371%206.1%2018.181%204.02%2017%203.34C15.087%202.235%2011.297%205.217%208.536%2010c-.387.67-.733%201.34-1.037%202%22%2F%3E%3Cpath%20d%3D%22M12%205.424C10.075%203.532%208.18%202.658%207%203.34C5.087%204.444%205.774%209.217%208.536%2014c.386.67.793%201.304%201.212%201.896M12%2018.574c1.926%201.893%203.821%202.768%205%202.086c1.913-1.104%201.226-5.877-1.536-10.66q-.563-.976-1.212-1.897M11.5%2012.866a1%201%200%201%200%201-1.732a1%201%200%200%200-1%201.732%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/tabler/brand-react.svg?color=%231a73e8&size=48