Emoji Surprise icon
Used in emoji picker & some simple voting scenarios. Should not be used as emoji. The Emoji Surprise 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 Surprise 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 { EmojiSurprise24Regular, EmojiSurprise24Filled } from "@fluentui/react-icons";
export function Example() {
return <EmojiSurprise24Regular aria-label="Emoji Surprise" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_emoji_surprise_24_regular.svg" width="24" height="24" alt="Emoji Surprise"> 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="M12 2.00391C17.5228 2.00391 22 6.48106 22 12.0039C22 17.5268 17.5228 22.0039 12 22.0039C6.47715 22.0039 2 17.5268 2 12.0039C2 6.48106 6.47715 2.00391 12 2.00391ZM12 3.50391C7.30558 3.50391 3.5 7.30949 3.5 12.0039C3.5 16.6983 7.30558 20.5039 12 20.5039C16.6944 20.5039 20.5 16.6983 20.5 12.0039C20.5 7.30949 16.6944 3.50391 12 3.50391ZM12 12.9993C13.2426 12.9993 14.25 14.0066 14.25 15.2493C14.25 16.4919 13.2426 17.4993 12 17.4993C10.7574 17.4993 9.75 16.4919 9.75 15.2493C9.75 14.0066 10.7574 12.9993 12 12.9993ZM9.00045 8.75044C9.69041 8.75044 10.2497 9.30977 10.2497 9.99973C10.2497 10.6897 9.69041 11.249 9.00045 11.249C8.31048 11.249 7.75116 10.6897 7.75116 9.99973C7.75116 9.30977 8.31048 8.75044 9.00045 8.75044ZM15.0004 8.75044C15.6904 8.75044 16.2497 9.30977 16.2497 9.99973C16.2497 10.6897 15.6904 11.249 15.0004 11.249C14.3105 11.249 13.7512 10.6897 13.7512 9.99973C13.7512 9.30977 14.3105 8.75044 15.0004 8.75044Z" 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_surprise_24_regular.svg";Details
| Name | Emoji Surprise |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_emoji_surprise_24_regular.svg |
| Filled file | ic_fluent_emoji_surprise_24_filled.svg |
| React components | EmojiSurprise24Regular, EmojiSurprise24Filled |
| License | MIT (© Microsoft Corporation) |