Emoji Angry icon
Used in emoji picker & some simple voting scenarios. Should not be used as emoji. The Emoji Angry 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 Angry 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 { EmojiAngry24Regular, EmojiAngry24Filled } from "@fluentui/react-icons";
export function Example() {
return <EmojiAngry24Regular aria-label="Emoji Angry" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_emoji_angry_24_regular.svg" width="24" height="24" alt="Emoji Angry"> 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 13.4973C13.6312 13.4973 15.1604 14.1522 16.281 15.2927C16.5714 15.5882 16.5672 16.063 16.2717 16.3533C15.9763 16.6436 15.5014 16.6395 15.2111 16.344C14.3696 15.4876 13.2247 14.9973 12 14.9973C10.7726 14.9973 9.62535 15.4898 8.78348 16.3495C8.49367 16.6455 8.01882 16.6505 7.72287 16.3607C7.42693 16.0709 7.42195 15.596 7.71175 15.3001C8.83296 14.1551 10.3652 13.4973 12 13.4973ZM7.16435 6.78076C7.39958 6.48672 7.81102 6.41665 8.1269 6.60075L8.21852 6.66363L10.7185 8.66363C11.042 8.92239 11.0944 9.39436 10.8357 9.7178C10.6876 9.90291 10.4696 9.99925 10.2497 9.99931C10.2497 10.6897 9.69041 11.249 9.00045 11.249C8.31048 11.249 7.75116 10.6897 7.75116 9.99973C7.75116 9.47356 8.07645 9.02336 8.5369 8.83927L7.28148 7.83493C6.95803 7.57618 6.90559 7.10421 7.16435 6.78076ZM13.2825 8.66374L15.7813 6.66374C16.1047 6.40491 16.5767 6.45724 16.8355 6.78063C17.0708 7.07462 17.049 7.49141 16.8001 7.75922L16.7187 7.83483L15.4632 8.83895C15.9241 9.02285 16.2497 9.47326 16.2497 9.99973C16.2497 10.6897 15.6904 11.249 15.0004 11.249C14.3536 11.249 13.8216 10.7574 13.7576 10.1275L13.7512 9.99769C13.5317 9.99931 13.3137 9.90301 13.1656 9.71794C12.9303 9.42395 12.9522 9.00715 13.2011 8.73934L13.2825 8.66374L15.7813 6.66374L13.2825 8.66374Z" 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_angry_24_regular.svg";Details
| Name | Emoji Angry |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_emoji_angry_24_regular.svg |
| Filled file | ic_fluent_emoji_angry_24_filled.svg |
| React components | EmojiAngry24Regular, EmojiAngry24Filled |
| License | MIT (© Microsoft Corporation) |