Emoji Smile Slight icon
Used in emoji picker & some simple voting scenarios. Should not be used as emoji. The Emoji Smile Slight icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Emoji Smile Slight icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { EmojiSmileSlight24Regular, EmojiSmileSlight24Filled } from "@fluentui/react-icons";
export function Example() {
return <EmojiSmileSlight24Regular aria-label="Emoji Smile Slight" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_emoji_smile_slight_24_regular.svg" width="24" height="24" alt="Emoji Smile Slight"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.2498 9.99953C10.2498 9.30956 9.6905 8.75024 9.00053 8.75024C8.31057 8.75024 7.75124 9.30956 7.75124 9.99953C7.75124 10.6895 8.31057 11.2488 9.00053 11.2488C9.6905 11.2488 10.2498 10.6895 10.2498 9.99953ZM16.2498 9.99953C16.2498 9.30956 15.6905 8.75024 15.0005 8.75024C14.3106 8.75024 13.7512 9.30956 13.7512 9.99953C13.7512 10.6895 14.3106 11.2488 15.0005 11.2488C15.6905 11.2488 16.2498 10.6895 16.2498 9.99953ZM10.136 15.106C9.78086 14.8929 9.32016 15.0081 9.10705 15.3633C8.89394 15.7185 9.00911 16.1792 9.3643 16.3923C10.1311 16.8524 11.0846 17.0617 12.0002 17.0617C12.9157 17.0617 13.8692 16.8525 14.636 16.3924C14.9912 16.1794 15.1064 15.7187 14.8933 15.3635C14.6802 15.0083 14.2196 14.8931 13.8644 15.1061C13.3812 15.396 12.7096 15.5617 12.0002 15.5617C11.2908 15.5617 10.6192 15.3959 10.136 15.106ZM22.0016 11.9996C22.0016 6.47589 17.5238 1.99805 12.0001 1.99805C6.47638 1.99805 1.99854 6.47589 1.99854 11.9996C1.99854 17.5233 6.47638 22.0011 12.0001 22.0011C17.5238 22.0011 22.0016 17.5233 22.0016 11.9996ZM3.49854 11.9996C3.49854 7.30432 7.30481 3.49805 12.0001 3.49805C16.6954 3.49805 20.5016 7.30432 20.5016 11.9996C20.5016 16.6949 16.6954 20.5011 12.0001 20.5011C7.30481 20.5011 3.49854 16.6949 3.49854 11.9996Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/emoji_smile_slight_24_regular.svg";Details
| Name | Emoji Smile Slight |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_emoji_smile_slight_24_regular.svg |
| Filled file | ic_fluent_emoji_smile_slight_24_filled.svg |
| React components | EmojiSmileSlight24Regular, EmojiSmileSlight24Filled |
| License | MIT (© Microsoft Corporation) |