face icon

face-outline from Material Symbols by Google · Outline · Social · Apache-2.0 Free for personal and commercial use.

Name: face-outline
Set: Material Symbols
Style: Outline
Category: Social
Viewbox: 24×24
License: Apache 2.0
Aliases: face-outline-rounded, face-outline-sharp

1 other variant in Material Symbols

face

The same icon in other sets

faceBoxIcons v2 faceBoxIcons v2 Solid faceMaterial Symbols Light face-fillMingCute Icon faceRadix Icons

More social icons from Material Symbols

Use the face icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.113 13.888Q7.75 13.525 7.75 13t.363-.888T9 11.75t.888.363t.362.887t-.363.888T9 14.25t-.888-.363m6 0q-.362-.362-.362-.887t.363-.888t.887-.362t.888.363t.362.887t-.363.888t-.887.362t-.888-.363M12 20q3.35 0 5.675-2.325T20 12q0-.6-.075-1.162T19.65 9.75q-.525.125-1.05.188T17.5 10q-2.275 0-4.3-.975T9.75 6.3q-.8 1.95-2.287 3.388T4 11.85V12q0 3.35 2.325 5.675T12 20m0 2q-2.075 0-3.9-.787t-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22M10.65 4.125q1.05 1.75 2.85 2.813T17.5 8q.35 0 .675-.038t.675-.087Q17.8 6.125 16 5.063T12 4q-.35 0-.675.038t-.675.087m-6.225 5.35Q5.7 8.75 6.65 7.6t1.425-2.575Q6.8 5.75 5.85 6.9T4.425 9.475m3.65-4.45"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsFaceOutline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.113 13.888Q7.75 13.525 7.75 13t.363-.888T9 11.75t.888.363t.362.887t-.363.888T9 14.25t-.888-.363m6 0q-.362-.362-.362-.887t.363-.888t.887-.362t.888.363t.362.887t-.363.888t-.887.362t-.888-.363M12 20q3.35 0 5.675-2.325T20 12q0-.6-.075-1.162T19.65 9.75q-.525.125-1.05.188T17.5 10q-2.275 0-4.3-.975T9.75 6.3q-.8 1.95-2.287 3.388T4 11.85V12q0 3.35 2.325 5.675T12 20m0 2q-2.075 0-3.9-.787t-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22M10.65 4.125q1.05 1.75 2.85 2.813T17.5 8q.35 0 .675-.038t.675-.087Q17.8 6.125 16 5.063T12 4q-.35 0-.675.038t-.675.087m-6.225 5.35Q5.7 8.75 6.65 7.6t1.425-2.575Q6.8 5.75 5.85 6.9T4.425 9.475m3.65-4.45"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.113 13.888Q7.75 13.525 7.75 13t.363-.888T9 11.75t.888.363t.362.887t-.363.888T9 14.25t-.888-.363m6 0q-.362-.362-.362-.887t.363-.888t.887-.362t.888.363t.362.887t-.363.888t-.887.362t-.888-.363M12 20q3.35 0 5.675-2.325T20 12q0-.6-.075-1.162T19.65 9.75q-.525.125-1.05.188T17.5 10q-2.275 0-4.3-.975T9.75 6.3q-.8 1.95-2.287 3.388T4 11.85V12q0 3.35 2.325 5.675T12 20m0 2q-2.075 0-3.9-.787t-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22M10.65 4.125q1.05 1.75 2.85 2.813T17.5 8q.35 0 .675-.038t.675-.087Q17.8 6.125 16 5.063T12 4q-.35 0-.675.038t-.675.087m-6.225 5.35Q5.7 8.75 6.65 7.6t1.425-2.575Q6.8 5.75 5.85 6.9T4.425 9.475m3.65-4.45"/></svg>
</template>

CSS

.icon-face-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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.113%2013.888Q7.75%2013.525%207.75%2013t.363-.888T9%2011.75t.888.363t.362.887t-.363.888T9%2014.25t-.888-.363m6%200q-.362-.362-.362-.887t.363-.888t.887-.362t.888.363t.362.887t-.363.888t-.887.362t-.888-.363M12%2020q3.35%200%205.675-2.325T20%2012q0-.6-.075-1.162T19.65%209.75q-.525.125-1.05.188T17.5%2010q-2.275%200-4.3-.975T9.75%206.3q-.8%201.95-2.287%203.388T4%2011.85V12q0%203.35%202.325%205.675T12%2020m0%202q-2.075%200-3.9-.787t-3.175-2.138T2.788%2015.9T2%2012t.788-3.9t2.137-3.175T8.1%202.788T12%202t3.9.788t3.175%202.137T21.213%208.1T22%2012t-.788%203.9t-2.137%203.175t-3.175%202.138T12%2022M10.65%204.125q1.05%201.75%202.85%202.813T17.5%208q.35%200%20.675-.038t.675-.087Q17.8%206.125%2016%205.063T12%204q-.35%200-.675.038t-.675.087m-6.225%205.35Q5.7%208.75%206.65%207.6t1.425-2.575Q6.8%205.75%205.85%206.9T4.425%209.475m3.65-4.45%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.113%2013.888Q7.75%2013.525%207.75%2013t.363-.888T9%2011.75t.888.363t.362.887t-.363.888T9%2014.25t-.888-.363m6%200q-.362-.362-.362-.887t.363-.888t.887-.362t.888.363t.362.887t-.363.888t-.887.362t-.888-.363M12%2020q3.35%200%205.675-2.325T20%2012q0-.6-.075-1.162T19.65%209.75q-.525.125-1.05.188T17.5%2010q-2.275%200-4.3-.975T9.75%206.3q-.8%201.95-2.287%203.388T4%2011.85V12q0%203.35%202.325%205.675T12%2020m0%202q-2.075%200-3.9-.787t-3.175-2.138T2.788%2015.9T2%2012t.788-3.9t2.137-3.175T8.1%202.788T12%202t3.9.788t3.175%202.137T21.213%208.1T22%2012t-.788%203.9t-2.137%203.175t-3.175%202.138T12%2022M10.65%204.125q1.05%201.75%202.85%202.813T17.5%208q.35%200%20.675-.038t.675-.087Q17.8%206.125%2016%205.063T12%204q-.35%200-.675.038t-.675.087m-6.225%205.35Q5.7%208.75%206.65%207.6t1.425-2.575Q6.8%205.75%205.85%206.9T4.425%209.475m3.65-4.45%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/face-outline.svg?color=%231a73e8&size=48