mention icon

mention-32-filled from Fluent UI System Icons by Microsoft Corporation · 32 Filled · MIT Free for personal and commercial use.

Name
mention-32-filled
Set
Fluent UI System Icons
Style
32 Filled
Viewbox
32×32
License
MIT

14 other variants in Fluent UI System Icons

mention-12-filledmention-12-regularmention-16-filledmention-16-regularmention-20-filledmention-20-regularmention-24-filledmention-24-regularmention-28-filledmention-28-regularmention-32-lightmention-32-regularmention-48-filledmention-48-regular

The same icon in other sets

mentionAkar IconsmentionCodiconsmentionSVG LogosmentionOcticons

Related icons in Fluent UI System Icons

mention-arrow-down-20-filledmention-brackets-20-filled

Use the mention icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 2c7.732 0 14 6.268 14 14l-.002.013c-.005 4.223-2.29 7.007-5.249 7.007c-1.74 0-3.248-.965-4.195-2.619C19.379 21.971 17.58 23 15.5 23C11.806 23 9 19.756 9 16c0-3.757 2.806-7 6.5-7a6.15 6.15 0 0 1 4 1.48v-.23a1.25 1.25 0 1 1 2.5 0V16c0 3.464 1.711 4.52 2.749 4.52s2.75-1.056 2.75-4.52v-.013C27.492 9.642 22.347 4.5 16 4.5C9.649 4.5 4.5 9.649 4.5 16S9.649 27.5 16 27.5c1.039 0 2.045-.14 3.002-.4c.485-.13 1.01-.017 1.366.338c.65.65.443 1.745-.438 2.002c-1.247.364-2.566.56-3.93.56c-7.732 0-14-6.268-14-14S8.268 2 16 2m-.5 9.5c-2.104 0-4 1.905-4 4.5s1.896 4.5 4 4.5s4-1.905 4-4.5s-1.895-4.5-4-4.5"/></svg>

React

import type { SVGProps } from "react";

export function FluentMention32Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 2c7.732 0 14 6.268 14 14l-.002.013c-.005 4.223-2.29 7.007-5.249 7.007c-1.74 0-3.248-.965-4.195-2.619C19.379 21.971 17.58 23 15.5 23C11.806 23 9 19.756 9 16c0-3.757 2.806-7 6.5-7a6.15 6.15 0 0 1 4 1.48v-.23a1.25 1.25 0 1 1 2.5 0V16c0 3.464 1.711 4.52 2.749 4.52s2.75-1.056 2.75-4.52v-.013C27.492 9.642 22.347 4.5 16 4.5C9.649 4.5 4.5 9.649 4.5 16S9.649 27.5 16 27.5c1.039 0 2.045-.14 3.002-.4c.485-.13 1.01-.017 1.366.338c.65.65.443 1.745-.438 2.002c-1.247.364-2.566.56-3.93.56c-7.732 0-14-6.268-14-14S8.268 2 16 2m-.5 9.5c-2.104 0-4 1.905-4 4.5s1.896 4.5 4 4.5s4-1.905 4-4.5s-1.895-4.5-4-4.5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 2c7.732 0 14 6.268 14 14l-.002.013c-.005 4.223-2.29 7.007-5.249 7.007c-1.74 0-3.248-.965-4.195-2.619C19.379 21.971 17.58 23 15.5 23C11.806 23 9 19.756 9 16c0-3.757 2.806-7 6.5-7a6.15 6.15 0 0 1 4 1.48v-.23a1.25 1.25 0 1 1 2.5 0V16c0 3.464 1.711 4.52 2.749 4.52s2.75-1.056 2.75-4.52v-.013C27.492 9.642 22.347 4.5 16 4.5C9.649 4.5 4.5 9.649 4.5 16S9.649 27.5 16 27.5c1.039 0 2.045-.14 3.002-.4c.485-.13 1.01-.017 1.366.338c.65.65.443 1.745-.438 2.002c-1.247.364-2.566.56-3.93.56c-7.732 0-14-6.268-14-14S8.268 2 16 2m-.5 9.5c-2.104 0-4 1.905-4 4.5s1.896 4.5 4 4.5s4-1.905 4-4.5s-1.895-4.5-4-4.5"/></svg>
</template>

CSS

.icon-mention-32-filled {
  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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%202c7.732%200%2014%206.268%2014%2014l-.002.013c-.005%204.223-2.29%207.007-5.249%207.007c-1.74%200-3.248-.965-4.195-2.619C19.379%2021.971%2017.58%2023%2015.5%2023C11.806%2023%209%2019.756%209%2016c0-3.757%202.806-7%206.5-7a6.15%206.15%200%200%201%204%201.48v-.23a1.25%201.25%200%201%201%202.5%200V16c0%203.464%201.711%204.52%202.749%204.52s2.75-1.056%202.75-4.52v-.013C27.492%209.642%2022.347%204.5%2016%204.5C9.649%204.5%204.5%209.649%204.5%2016S9.649%2027.5%2016%2027.5c1.039%200%202.045-.14%203.002-.4c.485-.13%201.01-.017%201.366.338c.65.65.443%201.745-.438%202.002c-1.247.364-2.566.56-3.93.56c-7.732%200-14-6.268-14-14S8.268%202%2016%202m-.5%209.5c-2.104%200-4%201.905-4%204.5s1.896%204.5%204%204.5s4-1.905%204-4.5s-1.895-4.5-4-4.5%22%2F%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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%202c7.732%200%2014%206.268%2014%2014l-.002.013c-.005%204.223-2.29%207.007-5.249%207.007c-1.74%200-3.248-.965-4.195-2.619C19.379%2021.971%2017.58%2023%2015.5%2023C11.806%2023%209%2019.756%209%2016c0-3.757%202.806-7%206.5-7a6.15%206.15%200%200%201%204%201.48v-.23a1.25%201.25%200%201%201%202.5%200V16c0%203.464%201.711%204.52%202.749%204.52s2.75-1.056%202.75-4.52v-.013C27.492%209.642%2022.347%204.5%2016%204.5C9.649%204.5%204.5%209.649%204.5%2016S9.649%2027.5%2016%2027.5c1.039%200%202.045-.14%203.002-.4c.485-.13%201.01-.017%201.366.338c.65.65.443%201.745-.438%202.002c-1.247.364-2.566.56-3.93.56c-7.732%200-14-6.268-14-14S8.268%202%2016%202m-.5%209.5c-2.104%200-4%201.905-4%204.5s1.896%204.5%204%204.5s4-1.905%204-4.5s-1.895-4.5-4-4.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/mention-32-filled.svg?color=%231a73e8&size=48