smiley icon
smiley-16 from Octicons by GitHub · 16 · MIT Free for personal and commercial use.
- Name
- smiley-16
- Set
- Octicons
- Style
- 16
- 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="currentColor" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M1.5 8a6.5 6.5 0 1 0 13 0a6.5 6.5 0 0 0-13 0m3.82 1.636a.75.75 0 0 1 1.038.175l.007.009q.155.177.35.31c.264.178.683.37 1.285.37s1.02-.192 1.285-.371q.195-.132.35-.31l.007-.008a.75.75 0 0 1 1.222.87l-.022-.015c.02.013.021.015.021.015v.001l-.001.002l-.002.003l-.005.007l-.014.019a2 2 0 0 1-.184.213q-.241.25-.53.445c-.63.418-1.37.638-2.127.629c-.946 0-1.652-.308-2.126-.63a3.3 3.3 0 0 1-.715-.657l-.014-.02l-.005-.006l-.002-.003v-.002h-.001l.613-.432l-.614.43a.75.75 0 0 1 .183-1.044ZM12 7a1 1 0 1 1-2 0a1 1 0 0 1 2 0M5 8a1 1 0 1 1 0-2a1 1 0 0 1 0 2m5.25 2.25l.592.416z"/></svg>
React
import type { SVGProps } from "react";
export function OcticonSmiley16(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M1.5 8a6.5 6.5 0 1 0 13 0a6.5 6.5 0 0 0-13 0m3.82 1.636a.75.75 0 0 1 1.038.175l.007.009q.155.177.35.31c.264.178.683.37 1.285.37s1.02-.192 1.285-.371q.195-.132.35-.31l.007-.008a.75.75 0 0 1 1.222.87l-.022-.015c.02.013.021.015.021.015v.001l-.001.002l-.002.003l-.005.007l-.014.019a2 2 0 0 1-.184.213q-.241.25-.53.445c-.63.418-1.37.638-2.127.629c-.946 0-1.652-.308-2.126-.63a3.3 3.3 0 0 1-.715-.657l-.014-.02l-.005-.006l-.002-.003v-.002h-.001l.613-.432l-.614.43a.75.75 0 0 1 .183-1.044ZM12 7a1 1 0 1 1-2 0a1 1 0 0 1 2 0M5 8a1 1 0 1 1 0-2a1 1 0 0 1 0 2m5.25 2.25l.592.416z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M1.5 8a6.5 6.5 0 1 0 13 0a6.5 6.5 0 0 0-13 0m3.82 1.636a.75.75 0 0 1 1.038.175l.007.009q.155.177.35.31c.264.178.683.37 1.285.37s1.02-.192 1.285-.371q.195-.132.35-.31l.007-.008a.75.75 0 0 1 1.222.87l-.022-.015c.02.013.021.015.021.015v.001l-.001.002l-.002.003l-.005.007l-.014.019a2 2 0 0 1-.184.213q-.241.25-.53.445c-.63.418-1.37.638-2.127.629c-.946 0-1.652-.308-2.126-.63a3.3 3.3 0 0 1-.715-.657l-.014-.02l-.005-.006l-.002-.003v-.002h-.001l.613-.432l-.614.43a.75.75 0 0 1 .183-1.044ZM12 7a1 1 0 1 1-2 0a1 1 0 0 1 2 0M5 8a1 1 0 1 1 0-2a1 1 0 0 1 0 2m5.25 2.25l.592.416z"/></svg> </template>
CSS
.icon-smiley-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%3D%22currentColor%22%20d%3D%22M8%200a8%208%200%201%201%200%2016A8%208%200%200%201%208%200M1.5%208a6.5%206.5%200%201%200%2013%200a6.5%206.5%200%200%200-13%200m3.82%201.636a.75.75%200%200%201%201.038.175l.007.009q.155.177.35.31c.264.178.683.37%201.285.37s1.02-.192%201.285-.371q.195-.132.35-.31l.007-.008a.75.75%200%200%201%201.222.87l-.022-.015c.02.013.021.015.021.015v.001l-.001.002l-.002.003l-.005.007l-.014.019a2%202%200%200%201-.184.213q-.241.25-.53.445c-.63.418-1.37.638-2.127.629c-.946%200-1.652-.308-2.126-.63a3.3%203.3%200%200%201-.715-.657l-.014-.02l-.005-.006l-.002-.003v-.002h-.001l.613-.432l-.614.43a.75.75%200%200%201%20.183-1.044ZM12%207a1%201%200%201%201-2%200a1%201%200%200%201%202%200M5%208a1%201%200%201%201%200-2a1%201%200%200%201%200%202m5.25%202.25l.592.416z%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%3D%22currentColor%22%20d%3D%22M8%200a8%208%200%201%201%200%2016A8%208%200%200%201%208%200M1.5%208a6.5%206.5%200%201%200%2013%200a6.5%206.5%200%200%200-13%200m3.82%201.636a.75.75%200%200%201%201.038.175l.007.009q.155.177.35.31c.264.178.683.37%201.285.37s1.02-.192%201.285-.371q.195-.132.35-.31l.007-.008a.75.75%200%200%201%201.222.87l-.022-.015c.02.013.021.015.021.015v.001l-.001.002l-.002.003l-.005.007l-.014.019a2%202%200%200%201-.184.213q-.241.25-.53.445c-.63.418-1.37.638-2.127.629c-.946%200-1.652-.308-2.126-.63a3.3%203.3%200%200%201-.715-.657l-.014-.02l-.005-.006l-.002-.003v-.002h-.001l.613-.432l-.614.43a.75.75%200%200%201%20.183-1.044ZM12%207a1%201%200%201%201-2%200a1%201%200%200%201%202%200M5%208a1%201%200%201%201%200-2a1%201%200%200%201%200%202m5.25%202.25l.592.416z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/octicon/smiley-16.svg?color=%231a73e8&size=48
