octoface icon
octoface-16 from Octicons by GitHub · 16 · MIT Free for personal and commercial use.
- Name
- octoface-16
- Set
- Octicons
- Style
- 16
- Viewbox
- 16×16
- License
- MIT
2 other variants in Octicons
The same icon in other sets
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="M1.326 1.973a1.2 1.2 0 0 1 1.49-.832c.387.112.977.307 1.575.602c.586.291 1.243.71 1.7 1.296c.022.027.042.056.061.084A13.22 13.22 0 0 1 8 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 0 1 1.576-.602a1.2 1.2 0 0 1 1.49.832c.14.493.356 1.347.479 2.29c.079.604.123 1.28.07 1.936c.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117c-.08-.712-.034-1.46.052-2.12c.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z" fill="currentColor"/><path d="M4 8a1 1 0 0 1 2 0v1a1 1 0 0 1-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0V8z" fill="currentColor"/></svg>
React
import type { SVGProps } from "react";
export function OcticonOctoface16(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="M1.326 1.973a1.2 1.2 0 0 1 1.49-.832c.387.112.977.307 1.575.602c.586.291 1.243.71 1.7 1.296c.022.027.042.056.061.084A13.22 13.22 0 0 1 8 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 0 1 1.576-.602a1.2 1.2 0 0 1 1.49.832c.14.493.356 1.347.479 2.29c.079.604.123 1.28.07 1.936c.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117c-.08-.712-.034-1.46.052-2.12c.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z" fill="currentColor"/><path d="M4 8a1 1 0 0 1 2 0v1a1 1 0 0 1-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0V8z" 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="M1.326 1.973a1.2 1.2 0 0 1 1.49-.832c.387.112.977.307 1.575.602c.586.291 1.243.71 1.7 1.296c.022.027.042.056.061.084A13.22 13.22 0 0 1 8 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 0 1 1.576-.602a1.2 1.2 0 0 1 1.49.832c.14.493.356 1.347.479 2.29c.079.604.123 1.28.07 1.936c.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117c-.08-.712-.034-1.46.052-2.12c.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z" fill="currentColor"/><path d="M4 8a1 1 0 0 1 2 0v1a1 1 0 0 1-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0V8z" fill="currentColor"/></svg> </template>
CSS
.icon-octoface-16 {
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%22M1.326%201.973a1.2%201.2%200%200%201%201.49-.832c.387.112.977.307%201.575.602c.586.291%201.243.71%201.7%201.296c.022.027.042.056.061.084A13.22%2013.22%200%200%201%208%203c.67%200%201.289.037%201.861.108l.051-.07c.457-.586%201.114-1.004%201.7-1.295a9.654%209.654%200%200%201%201.576-.602a1.2%201.2%200%200%201%201.49.832c.14.493.356%201.347.479%202.29c.079.604.123%201.28.07%201.936c.541.977.773%202.11.773%203.301C16%2013%2014.5%2015%208%2015s-8-2-8-5.5c0-1.034.238-2.128.795-3.117c-.08-.712-.034-1.46.052-2.12c.122-.943.34-1.797.479-2.29zM8%2013.065c6%200%206.5-2%206-4.27C13.363%205.905%2011.25%205%208%205s-5.363.904-6%203.796c-.5%202.27%200%204.27%206%204.27z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M4%208a1%201%200%200%201%202%200v1a1%201%200%200%201-2%200V8zm2.078%202.492c-.083-.264.146-.492.422-.492h3c.276%200%20.505.228.422.492C9.67%2011.304%208.834%2012%208%2012c-.834%200-1.669-.696-1.922-1.508zM10%208a1%201%200%201%201%202%200v1a1%201%200%201%201-2%200V8z%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%22M1.326%201.973a1.2%201.2%200%200%201%201.49-.832c.387.112.977.307%201.575.602c.586.291%201.243.71%201.7%201.296c.022.027.042.056.061.084A13.22%2013.22%200%200%201%208%203c.67%200%201.289.037%201.861.108l.051-.07c.457-.586%201.114-1.004%201.7-1.295a9.654%209.654%200%200%201%201.576-.602a1.2%201.2%200%200%201%201.49.832c.14.493.356%201.347.479%202.29c.079.604.123%201.28.07%201.936c.541.977.773%202.11.773%203.301C16%2013%2014.5%2015%208%2015s-8-2-8-5.5c0-1.034.238-2.128.795-3.117c-.08-.712-.034-1.46.052-2.12c.122-.943.34-1.797.479-2.29zM8%2013.065c6%200%206.5-2%206-4.27C13.363%205.905%2011.25%205%208%205s-5.363.904-6%203.796c-.5%202.27%200%204.27%206%204.27z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M4%208a1%201%200%200%201%202%200v1a1%201%200%200%201-2%200V8zm2.078%202.492c-.083-.264.146-.492.422-.492h3c.276%200%20.505.228.422.492C9.67%2011.304%208.834%2012%208%2012c-.834%200-1.669-.696-1.922-1.508zM10%208a1%201%200%201%201%202%200v1a1%201%200%201%201-2%200V8z%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-16.svg?color=%231a73e8&size=48
