Fluent Emoji Flat Icons
Browse 3,174 free Fluent Emoji Flat. Download SVG icon, copy as JSX, PNG or Base64. MIT licensed. Designed by Microsoft Corporation. Styles: Precise Shapes, Has Padding
About Fluent Emoji Flat Icons
Created By
Microsoft CorporationVisit Website
License
MITView License
Color Support
Multi-color
Category
Emoji
Features & Tags
Precise Shapes, Has Padding
Copy & Download Fluent Emoji Flat Icons
Click any icon above to open the detail panel. Four export formats are available instantly, no sign-up required.
SVG
Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.
JSX / TSX
React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.
PNG
Raster export at 1x, 2x and 3x for email templates, Figma imports, app assets, and Open Graph images.
Base64
Inline data URI — embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.
Works with shadcn/ui
Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, install and use via @iconify/react, fully tree-shakeable, no icon font loading required.
How to use Fluent Emoji Flat Icons
Fluent Emoji Flat Icons are available through Iconify, so you can drop them into React, Vue, Svelte, or plain HTML without downloading individual files. Pick the method that matches your stack below.
React
Install the Iconify React component:
npm install @iconify/reactThen import and use any Fluent Emoji Flat Icons by its name:
import { Icon } from '@iconify/react';
export default function App() {
return <Icon icon="fluent-emoji-flat:[icon-name]" />;
}Vue
Install the Iconify Vue component:
npm install @iconify/vueThen register and use it in your component:
<script>
import { Icon } from '@iconify/vue';
</script>
<template>
<Icon icon="fluent-emoji-flat:[icon-name]" />
</template>Svelte
Install the Iconify Svelte component:
npm install @iconify/svelteThen import and use it in your .svelte file:
<script>
import IconifyIcon from '@iconify/svelte';
</script>
<IconifyIcon icon="fluent-emoji-flat:[icon-name]" />HTML
No installation needed — load the Iconify script from a CDN and reference icons directly in your markup:
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@latest/dist/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji-flat:[icon-name]" height="36"></iconify-icon>