smile icon

smile from css.gg by Astrit · Outline · MIT Free for personal and commercial use.

Name: smile
Set: css.gg
Style: Outline
Viewbox: 24×24
License: MIT

The same icon in other sets

smile-filledAnt Design Icons smileBoxIcons v2 smileBoxIcons v2 Solid smileFont Awesome Regular smileFont Awesome Solid smileFeather Icons smileHuge Icons smileLine Awesome smileLucide smileMyna UI Icons smilePixelarticons smileTDesign Icons smileUnicons

Related icons in css.gg

smile-mouth-open smile-neutral smile-no-mouth smile-none smile-sad smile-upside

Use the smile icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M16 13h-2a2 2 0 1 1-4 0H8a4 4 0 0 0 8 0m-6-3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m5 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/><path fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0a8 8 0 0 1 16 0" clip-rule="evenodd"/></g></svg>

React

import type { SVGProps } from "react";

export function GgSmile(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M16 13h-2a2 2 0 1 1-4 0H8a4 4 0 0 0 8 0m-6-3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m5 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/><path fillRule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0a8 8 0 0 1 16 0" clipRule="evenodd"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M16 13h-2a2 2 0 1 1-4 0H8a4 4 0 0 0 8 0m-6-3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m5 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/><path fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0a8 8 0 0 1 16 0" clip-rule="evenodd"/></g></svg>
</template>

CSS

.icon-smile {
  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%22currentColor%22%3E%3Cpath%20d%3D%22M16%2013h-2a2%202%200%201%201-4%200H8a4%204%200%200%200%208%200m-6-3a1%201%200%201%201-2%200a1%201%200%200%201%202%200m5%201a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M22%2012c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010m-2%200a8%208%200%201%201-16%200a8%208%200%200%201%2016%200%22%20clip-rule%3D%22evenodd%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%22currentColor%22%3E%3Cpath%20d%3D%22M16%2013h-2a2%202%200%201%201-4%200H8a4%204%200%200%200%208%200m-6-3a1%201%200%201%201-2%200a1%201%200%200%201%202%200m5%201a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M22%2012c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010m-2%200a8%208%200%201%201-16%200a8%208%200%200%201%2016%200%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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