smiley icon

smiley-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.

Name: smiley-fill
Set: Framework7 Icons
Style: Fill
Viewbox: 56×56
License: MIT

1 other variant in Framework7 Icons

The same icon in other sets

smileyCodicons smileyJam Icons smileyOcticons smileyPhosphor

Use the smiley icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m-7.336-26.133c-1.406 0-2.578-1.242-2.578-3.023c0-1.758 1.172-3 2.578-3c1.43 0 2.625 1.242 2.625 3c0 1.781-1.195 3.023-2.625 3.023m14.11 0c-1.43 0-2.602-1.242-2.602-3.023c0-1.758 1.172-3 2.601-3c1.407 0 2.602 1.242 2.602 3c0 1.781-1.195 3.023-2.602 3.023m-7.102 13.805c-5.86 0-9.492-4.148-9.492-5.695c0-.328.21-.446.468-.258c1.688 1.36 4.758 2.906 9.024 2.906s7.242-1.476 9-2.93c.258-.187.492-.046.492.282c0 1.547-3.656 5.695-9.492 5.695"/></svg>

React

import type { SVGProps } from "react";

export function F7SmileyFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m-7.336-26.133c-1.406 0-2.578-1.242-2.578-3.023c0-1.758 1.172-3 2.578-3c1.43 0 2.625 1.242 2.625 3c0 1.781-1.195 3.023-2.625 3.023m14.11 0c-1.43 0-2.602-1.242-2.602-3.023c0-1.758 1.172-3 2.601-3c1.407 0 2.602 1.242 2.602 3c0 1.781-1.195 3.023-2.602 3.023m-7.102 13.805c-5.86 0-9.492-4.148-9.492-5.695c0-.328.21-.446.468-.258c1.688 1.36 4.758 2.906 9.024 2.906s7.242-1.476 9-2.93c.258-.187.492-.046.492.282c0 1.547-3.656 5.695-9.492 5.695"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m-7.336-26.133c-1.406 0-2.578-1.242-2.578-3.023c0-1.758 1.172-3 2.578-3c1.43 0 2.625 1.242 2.625 3c0 1.781-1.195 3.023-2.625 3.023m14.11 0c-1.43 0-2.602-1.242-2.602-3.023c0-1.758 1.172-3 2.601-3c1.407 0 2.602 1.242 2.602 3c0 1.781-1.195 3.023-2.602 3.023m-7.102 13.805c-5.86 0-9.492-4.148-9.492-5.695c0-.328.21-.446.468-.258c1.688 1.36 4.758 2.906 9.024 2.906s7.242-1.476 9-2.93c.258-.187.492-.046.492.282c0 1.547-3.656 5.695-9.492 5.695"/></svg>
</template>

CSS

.icon-smiley-fill {
  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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%2051.906c13.055%200%2023.906-10.828%2023.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899%204.094%204.095%2014.945%204.095%2028c0%2013.078%2010.828%2023.906%2023.906%2023.906m-7.336-26.133c-1.406%200-2.578-1.242-2.578-3.023c0-1.758%201.172-3%202.578-3c1.43%200%202.625%201.242%202.625%203c0%201.781-1.195%203.023-2.625%203.023m14.11%200c-1.43%200-2.602-1.242-2.602-3.023c0-1.758%201.172-3%202.601-3c1.407%200%202.602%201.242%202.602%203c0%201.781-1.195%203.023-2.602%203.023m-7.102%2013.805c-5.86%200-9.492-4.148-9.492-5.695c0-.328.21-.446.468-.258c1.688%201.36%204.758%202.906%209.024%202.906s7.242-1.476%209-2.93c.258-.187.492-.046.492.282c0%201.547-3.656%205.695-9.492%205.695%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%2051.906c13.055%200%2023.906-10.828%2023.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899%204.094%204.095%2014.945%204.095%2028c0%2013.078%2010.828%2023.906%2023.906%2023.906m-7.336-26.133c-1.406%200-2.578-1.242-2.578-3.023c0-1.758%201.172-3%202.578-3c1.43%200%202.625%201.242%202.625%203c0%201.781-1.195%203.023-2.625%203.023m14.11%200c-1.43%200-2.602-1.242-2.602-3.023c0-1.758%201.172-3%202.601-3c1.407%200%202.602%201.242%202.602%203c0%201.781-1.195%203.023-2.602%203.023m-7.102%2013.805c-5.86%200-9.492-4.148-9.492-5.695c0-.328.21-.446.468-.258c1.688%201.36%204.758%202.906%209.024%202.906s7.242-1.476%209-2.93c.258-.187.492-.046.492.282c0%201.547-3.656%205.695-9.492%205.695%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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