smiley grin icon
smiley-grin-24 from Octicons by GitHub · 24 · MIT Free for personal and commercial use.
- Name
- smiley-grin-24
- Set
- Octicons
- Style
- 24
- Viewbox
- 24×24
- License
- MIT
1 other variant in Octicons
Related icons in Octicons
Use the smiley grin icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12S5.925 1 12 1m0 1.5A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 9.5 9.5a9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5m4.5 11.75a.75.75 0 0 1 .727.932c-.292 1.171-1.74 3.943-5.227 3.943s-4.935-2.772-5.228-3.943a.75.75 0 0 1 .728-.932zm-7.863 1.5c.531.875 1.578 1.875 3.363 1.875s2.832-1 3.363-1.875zM8 8.25c1.294 0 2.122.663 2.6 1.3a4 4 0 0 1 .588 1.135l.028.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749 0 0 1-1.454.369l-.001-.005a2 2 0 0 0-.074-.206a2.5 2.5 0 0 0-.298-.526c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5 2.5 0 0 0-.372.732h-.001a.75.75 0 0 1-1.455-.364l.63.158l-.63-.159v-.001l.001-.001l.001-.003l.002-.01l.008-.029l.028-.088A4 4 0 0 1 5.4 9.55c.478-.637 1.306-1.3 2.6-1.3m8 0c1.294 0 2.122.663 2.6 1.3a4 4 0 0 1 .589 1.135l.027.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749 0 0 1-1.454.369v-.005l-.012-.038a2.5 2.5 0 0 0-.361-.694c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5 2.5 0 0 0-.373.732a.75.75 0 0 1-1.454-.364l.629.158c-.627-.157-.63-.158-.629-.159v-.002l.001-.003l.002-.01l.008-.029l.028-.088A4 4 0 0 1 13.4 9.55c.478-.637 1.306-1.3 2.6-1.3m-9.772 2.933h-.001v-.002z"/></svg>
React
import type { SVGProps } from "react";
export function OcticonSmileyGrin24(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="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12S5.925 1 12 1m0 1.5A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 9.5 9.5a9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5m4.5 11.75a.75.75 0 0 1 .727.932c-.292 1.171-1.74 3.943-5.227 3.943s-4.935-2.772-5.228-3.943a.75.75 0 0 1 .728-.932zm-7.863 1.5c.531.875 1.578 1.875 3.363 1.875s2.832-1 3.363-1.875zM8 8.25c1.294 0 2.122.663 2.6 1.3a4 4 0 0 1 .588 1.135l.028.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749 0 0 1-1.454.369l-.001-.005a2 2 0 0 0-.074-.206a2.5 2.5 0 0 0-.298-.526c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5 2.5 0 0 0-.372.732h-.001a.75.75 0 0 1-1.455-.364l.63.158l-.63-.159v-.001l.001-.001l.001-.003l.002-.01l.008-.029l.028-.088A4 4 0 0 1 5.4 9.55c.478-.637 1.306-1.3 2.6-1.3m8 0c1.294 0 2.122.663 2.6 1.3a4 4 0 0 1 .589 1.135l.027.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749 0 0 1-1.454.369v-.005l-.012-.038a2.5 2.5 0 0 0-.361-.694c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5 2.5 0 0 0-.373.732a.75.75 0 0 1-1.454-.364l.629.158c-.627-.157-.63-.158-.629-.159v-.002l.001-.003l.002-.01l.008-.029l.028-.088A4 4 0 0 1 13.4 9.55c.478-.637 1.306-1.3 2.6-1.3m-9.772 2.933h-.001v-.002z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12S5.925 1 12 1m0 1.5A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 9.5 9.5a9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5m4.5 11.75a.75.75 0 0 1 .727.932c-.292 1.171-1.74 3.943-5.227 3.943s-4.935-2.772-5.228-3.943a.75.75 0 0 1 .728-.932zm-7.863 1.5c.531.875 1.578 1.875 3.363 1.875s2.832-1 3.363-1.875zM8 8.25c1.294 0 2.122.663 2.6 1.3a4 4 0 0 1 .588 1.135l.028.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749 0 0 1-1.454.369l-.001-.005a2 2 0 0 0-.074-.206a2.5 2.5 0 0 0-.298-.526c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5 2.5 0 0 0-.372.732h-.001a.75.75 0 0 1-1.455-.364l.63.158l-.63-.159v-.001l.001-.001l.001-.003l.002-.01l.008-.029l.028-.088A4 4 0 0 1 5.4 9.55c.478-.637 1.306-1.3 2.6-1.3m8 0c1.294 0 2.122.663 2.6 1.3a4 4 0 0 1 .589 1.135l.027.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749 0 0 1-1.454.369v-.005l-.012-.038a2.5 2.5 0 0 0-.361-.694c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5 2.5 0 0 0-.373.732a.75.75 0 0 1-1.454-.364l.629.158c-.627-.157-.63-.158-.629-.159v-.002l.001-.003l.002-.01l.008-.029l.028-.088A4 4 0 0 1 13.4 9.55c.478-.637 1.306-1.3 2.6-1.3m-9.772 2.933h-.001v-.002z"/></svg> </template>
CSS
.icon-smiley-grin-24 {
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%22M12%201c6.075%200%2011%204.925%2011%2011s-4.925%2011-11%2011S1%2018.075%201%2012S5.925%201%2012%201m0%201.5A9.5%209.5%200%200%200%202.5%2012a9.5%209.5%200%200%200%209.5%209.5a9.5%209.5%200%200%200%209.5-9.5A9.5%209.5%200%200%200%2012%202.5m4.5%2011.75a.75.75%200%200%201%20.727.932c-.292%201.171-1.74%203.943-5.227%203.943s-4.935-2.772-5.228-3.943a.75.75%200%200%201%20.728-.932zm-7.863%201.5c.531.875%201.578%201.875%203.363%201.875s2.832-1%203.363-1.875zM8%208.25c1.294%200%202.122.663%202.6%201.3a4%204%200%200%201%20.588%201.135l.028.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749%200%200%201-1.454.369l-.001-.005a2%202%200%200%200-.074-.206a2.5%202.5%200%200%200-.298-.526c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5%202.5%200%200%200-.372.732h-.001a.75.75%200%200%201-1.455-.364l.63.158l-.63-.159v-.001l.001-.001l.001-.003l.002-.01l.008-.029l.028-.088A4%204%200%200%201%205.4%209.55c.478-.637%201.306-1.3%202.6-1.3m8%200c1.294%200%202.122.663%202.6%201.3a4%204%200%200%201%20.589%201.135l.027.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749%200%200%201-1.454.369v-.005l-.012-.038a2.5%202.5%200%200%200-.361-.694c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5%202.5%200%200%200-.373.732a.75.75%200%200%201-1.454-.364l.629.158c-.627-.157-.63-.158-.629-.159v-.002l.001-.003l.002-.01l.008-.029l.028-.088A4%204%200%200%201%2013.4%209.55c.478-.637%201.306-1.3%202.6-1.3m-9.772%202.933h-.001v-.002z%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%22M12%201c6.075%200%2011%204.925%2011%2011s-4.925%2011-11%2011S1%2018.075%201%2012S5.925%201%2012%201m0%201.5A9.5%209.5%200%200%200%202.5%2012a9.5%209.5%200%200%200%209.5%209.5a9.5%209.5%200%200%200%209.5-9.5A9.5%209.5%200%200%200%2012%202.5m4.5%2011.75a.75.75%200%200%201%20.727.932c-.292%201.171-1.74%203.943-5.227%203.943s-4.935-2.772-5.228-3.943a.75.75%200%200%201%20.728-.932zm-7.863%201.5c.531.875%201.578%201.875%203.363%201.875s2.832-1%203.363-1.875zM8%208.25c1.294%200%202.122.663%202.6%201.3a4%204%200%200%201%20.588%201.135l.028.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749%200%200%201-1.454.369l-.001-.005a2%202%200%200%200-.074-.206a2.5%202.5%200%200%200-.298-.526c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5%202.5%200%200%200-.372.732h-.001a.75.75%200%200%201-1.455-.364l.63.158l-.63-.159v-.001l.001-.001l.001-.003l.002-.01l.008-.029l.028-.088A4%204%200%200%201%205.4%209.55c.478-.637%201.306-1.3%202.6-1.3m8%200c1.294%200%202.122.663%202.6%201.3a4%204%200%200%201%20.589%201.135l.027.088l.008.029l.002.01l.001.003v.002c.001.001-.001.001-.629.159l.629-.158a.749.749%200%200%201-1.454.369v-.005l-.012-.038a2.5%202.5%200%200%200-.361-.694c-.272-.363-.695-.7-1.4-.7s-1.128.337-1.4.7a2.5%202.5%200%200%200-.373.732a.75.75%200%200%201-1.454-.364l.629.158c-.627-.157-.63-.158-.629-.159v-.002l.001-.003l.002-.01l.008-.029l.028-.088A4%204%200%200%201%2013.4%209.55c.478-.637%201.306-1.3%202.6-1.3m-9.772%202.933h-.001v-.002z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/octicon/smiley-grin-24.svg?color=%231a73e8&size=48
