Emoji Sad Slight icon
Used in emoji picker & some simple voting scenarios. Should not be used as emoji. The Emoji Sad 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 Sad 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 { EmojiSadSlight24Regular, EmojiSadSlight24Filled } from "@fluentui/react-icons";
export function Example() {
return <EmojiSadSlight24Regular aria-label="Emoji Sad Slight" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_emoji_sad_slight_24_regular.svg" width="24" height="24" alt="Emoji Sad 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.99953ZM15.7501 13.9991C14.8996 13.9991 13.9935 14.2134 13.2085 14.5189C12.4324 14.8209 11.6953 15.2432 11.2198 15.7188C10.9269 16.0116 10.9269 16.4865 11.2198 16.7794C11.5126 17.0723 11.9875 17.0723 12.2804 16.7794C12.5549 16.5049 13.0834 16.1772 13.7526 15.9168C14.413 15.6597 15.1318 15.4991 15.7501 15.4991H16.3501C16.7643 15.4991 17.1001 15.1633 17.1001 14.7491C17.1001 14.3349 16.7643 13.9991 16.3501 13.9991H15.7501ZM22.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_sad_slight_24_regular.svg";Details
| Name | Emoji Sad Slight |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_emoji_sad_slight_24_regular.svg |
| Filled file | ic_fluent_emoji_sad_slight_24_filled.svg |
| React components | EmojiSadSlight24Regular, EmojiSadSlight24Filled |
| License | MIT (© Microsoft Corporation) |