Twitter Emoji Icons
Browse 4,169 free Twitter Emoji. Download SVG icon, copy as JSX, PNG or Base64. CC BY 4.0 licensed. Designed by Twitter. Styles: Precise Shapes
About Twitter Emoji Icons
Created By
TwitterVisit Website
License
CC BY 4.0View License
Color Support
Multi-color
Category
Emoji
Features & Tags
Precise Shapes
Copy & Download Twitter Emoji 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 Twitter Emoji Icons
Twitter Emoji 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 Twitter Emoji Icons by its name:
import { Icon } from '@iconify/react';
export default function App() {
return <Icon icon="twemoji:[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="twemoji:[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="twemoji:[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="twemoji:[icon-name]" height="36"></iconify-icon>