name badge emoji
name-badge from Fluent Emoji by Microsoft Corporation · Default · MIT Free for personal and commercial use.
- Name
- name-badge
- Set
- Fluent Emoji
- Style
- Default
- Viewbox
- 32×32
- License
- MIT
The same emoji in other sets
Use the name badge emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iQ4Orpb)"><path fill="url(#if2WIlT)" d="M15.97 3.888c-.384 0-.609.242-.766.418l-3.49 3.978a1 1 0 0 1-1.489 0L7.252 4.973c-.37-.412-1.007-.447-1.39-.048a13.95 13.95 0 0 0-3.893 9.687c0 7.732 6.268 14 14 14s14-6.268 14-14c0-3.759-1.481-7.172-3.892-9.687c-.383-.4-1.02-.364-1.39.048l-2.974 3.31a1 1 0 0 1-1.488 0L16.74 4.307c-.153-.17-.36-.418-.77-.418"/></g><path fill="url(#imxLspd)" d="M5.97 15.612a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1z"/><defs><linearGradient id="if2WIlT" x1="15.969" x2="15.969" y1="3.888" y2="28.612" gradientUnits="userSpaceOnUse"><stop stop-color="#FF4E92"/><stop offset="1" stop-color="#F54C5B"/></linearGradient><linearGradient id="imxLspd" x1="15.969" x2="15.969" y1="15.312" y2="18.612" gradientUnits="userSpaceOnUse"><stop stop-color="#E7D8FC"/><stop offset="1" stop-color="#F5EFFF"/></linearGradient><filter id="iQ4Orpb" width="29" height="25.224" x="1.469" y="3.388" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.75"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.466667 0 0 0 0 0.670588 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_1959"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.5"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.87451 0 0 0 0 0.14902 0 0 0 0 0.356863 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18590_1959" result="effect2_innerShadow_18590_1959"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".5"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.901961 0 0 0 0 0.164706 0 0 0 0 0.313726 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18590_1959" result="effect3_innerShadow_18590_1959"/></filter></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentEmojiNameBadge(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iQ4Orpb)"><path fill="url(#if2WIlT)" d="M15.97 3.888c-.384 0-.609.242-.766.418l-3.49 3.978a1 1 0 0 1-1.489 0L7.252 4.973c-.37-.412-1.007-.447-1.39-.048a13.95 13.95 0 0 0-3.893 9.687c0 7.732 6.268 14 14 14s14-6.268 14-14c0-3.759-1.481-7.172-3.892-9.687c-.383-.4-1.02-.364-1.39.048l-2.974 3.31a1 1 0 0 1-1.488 0L16.74 4.307c-.153-.17-.36-.418-.77-.418"/></g><path fill="url(#imxLspd)" d="M5.97 15.612a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1z"/><defs><linearGradient id="if2WIlT" x1="15.969" x2="15.969" y1="3.888" y2="28.612" gradientUnits="userSpaceOnUse"><stop stopColor="#FF4E92"/><stop offset="1" stopColor="#F54C5B"/></linearGradient><linearGradient id="imxLspd" x1="15.969" x2="15.969" y1="15.312" y2="18.612" gradientUnits="userSpaceOnUse"><stop stopColor="#E7D8FC"/><stop offset="1" stopColor="#F5EFFF"/></linearGradient><filter id="iQ4Orpb" width="29" height="25.224" x="1.469" y="3.388" colorInterpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood floodOpacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.75"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.466667 0 0 0 0 0.670588 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_1959"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.5"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.87451 0 0 0 0 0.14902 0 0 0 0 0.356863 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18590_1959" result="effect2_innerShadow_18590_1959"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".5"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.901961 0 0 0 0 0.164706 0 0 0 0 0.313726 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18590_1959" result="effect3_innerShadow_18590_1959"/></filter></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iQ4Orpb)"><path fill="url(#if2WIlT)" d="M15.97 3.888c-.384 0-.609.242-.766.418l-3.49 3.978a1 1 0 0 1-1.489 0L7.252 4.973c-.37-.412-1.007-.447-1.39-.048a13.95 13.95 0 0 0-3.893 9.687c0 7.732 6.268 14 14 14s14-6.268 14-14c0-3.759-1.481-7.172-3.892-9.687c-.383-.4-1.02-.364-1.39.048l-2.974 3.31a1 1 0 0 1-1.488 0L16.74 4.307c-.153-.17-.36-.418-.77-.418"/></g><path fill="url(#imxLspd)" d="M5.97 15.612a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1z"/><defs><linearGradient id="if2WIlT" x1="15.969" x2="15.969" y1="3.888" y2="28.612" gradientUnits="userSpaceOnUse"><stop stop-color="#FF4E92"/><stop offset="1" stop-color="#F54C5B"/></linearGradient><linearGradient id="imxLspd" x1="15.969" x2="15.969" y1="15.312" y2="18.612" gradientUnits="userSpaceOnUse"><stop stop-color="#E7D8FC"/><stop offset="1" stop-color="#F5EFFF"/></linearGradient><filter id="iQ4Orpb" width="29" height="25.224" x="1.469" y="3.388" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.75"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.466667 0 0 0 0 0.670588 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_1959"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.5"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.87451 0 0 0 0 0.14902 0 0 0 0 0.356863 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18590_1959" result="effect2_innerShadow_18590_1959"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".5"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.901961 0 0 0 0 0.164706 0 0 0 0 0.313726 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18590_1959" result="effect3_innerShadow_18590_1959"/></filter></defs></g></svg> </template>
CSS
.icon-name-badge {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url(%23iQ4Orpb)%22%3E%3Cpath%20fill%3D%22url(%23if2WIlT)%22%20d%3D%22M15.97%203.888c-.384%200-.609.242-.766.418l-3.49%203.978a1%201%200%200%201-1.489%200L7.252%204.973c-.37-.412-1.007-.447-1.39-.048a13.95%2013.95%200%200%200-3.893%209.687c0%207.732%206.268%2014%2014%2014s14-6.268%2014-14c0-3.759-1.481-7.172-3.892-9.687c-.383-.4-1.02-.364-1.39.048l-2.974%203.31a1%201%200%200%201-1.488%200L16.74%204.307c-.153-.17-.36-.418-.77-.418%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22url(%23imxLspd)%22%20d%3D%22M5.97%2015.612a1%201%200%200%201%201-1h18a1%201%200%200%201%201%201v2a1%201%200%200%201-1%201h-18a1%201%200%200%201-1-1z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22if2WIlT%22%20x1%3D%2215.969%22%20x2%3D%2215.969%22%20y1%3D%223.888%22%20y2%3D%2228.612%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF4E92%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F54C5B%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22imxLspd%22%20x1%3D%2215.969%22%20x2%3D%2215.969%22%20y1%3D%2215.312%22%20y2%3D%2218.612%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23E7D8FC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F5EFFF%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22iQ4Orpb%22%20width%3D%2229%22%20height%3D%2225.224%22%20x%3D%221.469%22%20y%3D%223.388%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22-.75%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.25%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%200.466667%200%200%200%200%200.670588%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_18590_1959%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dy%3D%22-.5%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.375%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.87451%200%200%200%200%200.14902%200%200%200%200%200.356863%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22effect1_innerShadow_18590_1959%22%20result%3D%22effect2_innerShadow_18590_1959%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22.5%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.375%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.901961%200%200%200%200%200.164706%200%200%200%200%200.313726%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22effect2_innerShadow_18590_1959%22%20result%3D%22effect3_innerShadow_18590_1959%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url(%23iQ4Orpb)%22%3E%3Cpath%20fill%3D%22url(%23if2WIlT)%22%20d%3D%22M15.97%203.888c-.384%200-.609.242-.766.418l-3.49%203.978a1%201%200%200%201-1.489%200L7.252%204.973c-.37-.412-1.007-.447-1.39-.048a13.95%2013.95%200%200%200-3.893%209.687c0%207.732%206.268%2014%2014%2014s14-6.268%2014-14c0-3.759-1.481-7.172-3.892-9.687c-.383-.4-1.02-.364-1.39.048l-2.974%203.31a1%201%200%200%201-1.488%200L16.74%204.307c-.153-.17-.36-.418-.77-.418%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22url(%23imxLspd)%22%20d%3D%22M5.97%2015.612a1%201%200%200%201%201-1h18a1%201%200%200%201%201%201v2a1%201%200%200%201-1%201h-18a1%201%200%200%201-1-1z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22if2WIlT%22%20x1%3D%2215.969%22%20x2%3D%2215.969%22%20y1%3D%223.888%22%20y2%3D%2228.612%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF4E92%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F54C5B%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22imxLspd%22%20x1%3D%2215.969%22%20x2%3D%2215.969%22%20y1%3D%2215.312%22%20y2%3D%2218.612%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23E7D8FC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F5EFFF%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22iQ4Orpb%22%20width%3D%2229%22%20height%3D%2225.224%22%20x%3D%221.469%22%20y%3D%223.388%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22-.75%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.25%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%200.466667%200%200%200%200%200.670588%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_18590_1959%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dy%3D%22-.5%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.375%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.87451%200%200%200%200%200.14902%200%200%200%200%200.356863%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22effect1_innerShadow_18590_1959%22%20result%3D%22effect2_innerShadow_18590_1959%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22.5%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.375%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.901961%200%200%200%200%200.164706%200%200%200%200%200.313726%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22effect2_innerShadow_18590_1959%22%20result%3D%22effect3_innerShadow_18590_1959%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-emoji/name-badge.svg?color=%231a73e8&size=48
