octoface icon

octoface from Octicons by GitHub · Regular · MIT Free for personal and commercial use.

Name
octoface
Set
Octicons
Style
Regular
Viewbox
16×16
License
MIT

2 other variants in Octicons

octoface-16octoface-24

The same icon in other sets

octofaceCodicons

Use the octoface icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31c0 0-1.05-.33-3.44 1.3c-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3c-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69C0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35c0-.76.38-1.48 1.02-2.07c1.07-.98 2.9-.46 4.96-.46c2.07 0 3.88-.52 4.96.46c.65.59 1.02 1.3 1.02 2.07c0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function OcticonOctoface(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fillRule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31c0 0-1.05-.33-3.44 1.3c-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3c-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69C0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35c0-.76.38-1.48 1.02-2.07c1.07-.98 2.9-.46 4.96-.46c2.07 0 3.88-.52 4.96.46c.65.59 1.02 1.3 1.02 2.07c0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31c0 0-1.05-.33-3.44 1.3c-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3c-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69C0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35c0-.76.38-1.48 1.02-2.07c1.07-.98 2.9-.46 4.96-.46c2.07 0 3.88-.52 4.96.46c.65.59 1.02 1.3 1.02 2.07c0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" fill="currentColor"/></svg>
</template>

CSS

.icon-octoface {
  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%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M14.7%205.34c.13-.32.55-1.59-.13-3.31c0%200-1.05-.33-3.44%201.3c-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3c-.68%201.72-.26%202.99-.13%203.31C.49%206.21%200%207.33%200%208.69C0%2013.84%203.33%2015%207.98%2015S16%2013.84%2016%208.69c0-1.36-.49-2.48-1.3-3.35zM8%2014.02c-3.3%200-5.98-.15-5.98-3.35c0-.76.38-1.48%201.02-2.07c1.07-.98%202.9-.46%204.96-.46c2.07%200%203.88-.52%204.96.46c.65.59%201.02%201.3%201.02%202.07c0%203.19-2.68%203.35-5.98%203.35zM5.49%209.01c-.66%200-1.2.8-1.2%201.78s.54%201.79%201.2%201.79c.66%200%201.2-.8%201.2-1.79s-.54-1.78-1.2-1.78zm5.02%200c-.66%200-1.2.79-1.2%201.78s.54%201.79%201.2%201.79c.66%200%201.2-.8%201.2-1.79s-.53-1.78-1.2-1.78z%22%20fill%3D%22currentColor%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%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M14.7%205.34c.13-.32.55-1.59-.13-3.31c0%200-1.05-.33-3.44%201.3c-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3c-.68%201.72-.26%202.99-.13%203.31C.49%206.21%200%207.33%200%208.69C0%2013.84%203.33%2015%207.98%2015S16%2013.84%2016%208.69c0-1.36-.49-2.48-1.3-3.35zM8%2014.02c-3.3%200-5.98-.15-5.98-3.35c0-.76.38-1.48%201.02-2.07c1.07-.98%202.9-.46%204.96-.46c2.07%200%203.88-.52%204.96.46c.65.59%201.02%201.3%201.02%202.07c0%203.19-2.68%203.35-5.98%203.35zM5.49%209.01c-.66%200-1.2.8-1.2%201.78s.54%201.79%201.2%201.79c.66%200%201.2-.8%201.2-1.79s-.54-1.78-1.2-1.78zm5.02%200c-.66%200-1.2.79-1.2%201.78s.54%201.79%201.2%201.79c.66%200%201.2-.8%201.2-1.79s-.53-1.78-1.2-1.78z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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