smiley icon
smiley from Octicons by GitHub · Regular · MIT Free for personal and commercial use.
- Name
- smiley
- Set
- Octicons
- Style
- Regular
- Viewbox
- 16×16
- License
- MIT
2 other variants in Octicons
The same icon in other sets
Related icons in Octicons
Use the smiley icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8zm4.81 12.81a6.72 6.72 0 0 1-2.17 1.45c-.83.36-1.72.53-2.64.53c-.92 0-1.81-.17-2.64-.53c-.81-.34-1.55-.83-2.17-1.45a6.773 6.773 0 0 1-1.45-2.17A6.59 6.59 0 0 1 1.21 8c0-.92.17-1.81.53-2.64c.34-.81.83-1.55 1.45-2.17c.62-.62 1.36-1.11 2.17-1.45A6.59 6.59 0 0 1 8 1.21c.92 0 1.81.17 2.64.53c.81.34 1.55.83 2.17 1.45c.62.62 1.11 1.36 1.45 2.17c.36.83.53 1.72.53 2.64c0 .92-.17 1.81-.53 2.64c-.34.81-.83 1.55-1.45 2.17zM4 6.8v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2H5.2C4.53 8 4 7.47 4 6.8zm5 0v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2h-.59C9.53 8 9 7.47 9 6.8zm4 3.2c-.72 1.88-2.91 3-5 3s-4.28-1.13-5-3c-.14-.39.23-1 .66-1h8.59c.41 0 .89.61.75 1z" fill="currentColor"/></svg>
React
import type { SVGProps } from "react";
export function OcticonSmiley(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="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8zm4.81 12.81a6.72 6.72 0 0 1-2.17 1.45c-.83.36-1.72.53-2.64.53c-.92 0-1.81-.17-2.64-.53c-.81-.34-1.55-.83-2.17-1.45a6.773 6.773 0 0 1-1.45-2.17A6.59 6.59 0 0 1 1.21 8c0-.92.17-1.81.53-2.64c.34-.81.83-1.55 1.45-2.17c.62-.62 1.36-1.11 2.17-1.45A6.59 6.59 0 0 1 8 1.21c.92 0 1.81.17 2.64.53c.81.34 1.55.83 2.17 1.45c.62.62 1.11 1.36 1.45 2.17c.36.83.53 1.72.53 2.64c0 .92-.17 1.81-.53 2.64c-.34.81-.83 1.55-1.45 2.17zM4 6.8v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2H5.2C4.53 8 4 7.47 4 6.8zm5 0v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2h-.59C9.53 8 9 7.47 9 6.8zm4 3.2c-.72 1.88-2.91 3-5 3s-4.28-1.13-5-3c-.14-.39.23-1 .66-1h8.59c.41 0 .89.61.75 1z" 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="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8zm4.81 12.81a6.72 6.72 0 0 1-2.17 1.45c-.83.36-1.72.53-2.64.53c-.92 0-1.81-.17-2.64-.53c-.81-.34-1.55-.83-2.17-1.45a6.773 6.773 0 0 1-1.45-2.17A6.59 6.59 0 0 1 1.21 8c0-.92.17-1.81.53-2.64c.34-.81.83-1.55 1.45-2.17c.62-.62 1.36-1.11 2.17-1.45A6.59 6.59 0 0 1 8 1.21c.92 0 1.81.17 2.64.53c.81.34 1.55.83 2.17 1.45c.62.62 1.11 1.36 1.45 2.17c.36.83.53 1.72.53 2.64c0 .92-.17 1.81-.53 2.64c-.34.81-.83 1.55-1.45 2.17zM4 6.8v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2H5.2C4.53 8 4 7.47 4 6.8zm5 0v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2h-.59C9.53 8 9 7.47 9 6.8zm4 3.2c-.72 1.88-2.91 3-5 3s-4.28-1.13-5-3c-.14-.39.23-1 .66-1h8.59c.41 0 .89.61.75 1z" fill="currentColor"/></svg> </template>
CSS
.icon-smiley {
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%22M8%200C3.58%200%200%203.58%200%208s3.58%208%208%208s8-3.58%208-8s-3.58-8-8-8zm4.81%2012.81a6.72%206.72%200%200%201-2.17%201.45c-.83.36-1.72.53-2.64.53c-.92%200-1.81-.17-2.64-.53c-.81-.34-1.55-.83-2.17-1.45a6.773%206.773%200%200%201-1.45-2.17A6.59%206.59%200%200%201%201.21%208c0-.92.17-1.81.53-2.64c.34-.81.83-1.55%201.45-2.17c.62-.62%201.36-1.11%202.17-1.45A6.59%206.59%200%200%201%208%201.21c.92%200%201.81.17%202.64.53c.81.34%201.55.83%202.17%201.45c.62.62%201.11%201.36%201.45%202.17c.36.83.53%201.72.53%202.64c0%20.92-.17%201.81-.53%202.64c-.34.81-.83%201.55-1.45%202.17zM4%206.8v-.59c0-.66.53-1.19%201.2-1.19h.59c.66%200%201.19.53%201.19%201.19v.59c0%20.67-.53%201.2-1.19%201.2H5.2C4.53%208%204%207.47%204%206.8zm5%200v-.59c0-.66.53-1.19%201.2-1.19h.59c.66%200%201.19.53%201.19%201.19v.59c0%20.67-.53%201.2-1.19%201.2h-.59C9.53%208%209%207.47%209%206.8zm4%203.2c-.72%201.88-2.91%203-5%203s-4.28-1.13-5-3c-.14-.39.23-1%20.66-1h8.59c.41%200%20.89.61.75%201z%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%22M8%200C3.58%200%200%203.58%200%208s3.58%208%208%208s8-3.58%208-8s-3.58-8-8-8zm4.81%2012.81a6.72%206.72%200%200%201-2.17%201.45c-.83.36-1.72.53-2.64.53c-.92%200-1.81-.17-2.64-.53c-.81-.34-1.55-.83-2.17-1.45a6.773%206.773%200%200%201-1.45-2.17A6.59%206.59%200%200%201%201.21%208c0-.92.17-1.81.53-2.64c.34-.81.83-1.55%201.45-2.17c.62-.62%201.36-1.11%202.17-1.45A6.59%206.59%200%200%201%208%201.21c.92%200%201.81.17%202.64.53c.81.34%201.55.83%202.17%201.45c.62.62%201.11%201.36%201.45%202.17c.36.83.53%201.72.53%202.64c0%20.92-.17%201.81-.53%202.64c-.34.81-.83%201.55-1.45%202.17zM4%206.8v-.59c0-.66.53-1.19%201.2-1.19h.59c.66%200%201.19.53%201.19%201.19v.59c0%20.67-.53%201.2-1.19%201.2H5.2C4.53%208%204%207.47%204%206.8zm5%200v-.59c0-.66.53-1.19%201.2-1.19h.59c.66%200%201.19.53%201.19%201.19v.59c0%20.67-.53%201.2-1.19%201.2h-.59C9.53%208%209%207.47%209%206.8zm4%203.2c-.72%201.88-2.91%203-5%203s-4.28-1.13-5-3c-.14-.39.23-1%20.66-1h8.59c.41%200%20.89.61.75%201z%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/smiley.svg?color=%231a73e8&size=48
