at symbol icon
at-symbol-line from Majesticons by Gerrit Halfmann · Line · MIT Free for personal and commercial use.
- Name
- at-symbol-line
- Set
- Majesticons
- Style
- Line
- Viewbox
- 24×24
- License
- MIT
1 other variant in Majesticons
The same icon in other sets
Use the at symbol icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M6.412 7.584C5.36 9.044 5 10.827 5 12c0 1.173.36 2.956 1.412 4.416C7.426 17.825 9.126 19 12 19c1.98 0 3.385-.558 4.388-1.334a1 1 0 1 1 1.224 1.581C16.229 20.317 14.385 21 12 21c-3.526 0-5.826-1.491-7.212-3.416C3.44 15.711 3 13.494 3 12c0-1.493.44-3.711 1.788-5.584C6.174 4.492 8.474 3 12 3s5.826 1.492 7.212 3.416C20.56 8.289 21 10.506 21 12a3.79 3.79 0 0 1-.689 2.147c-.56.778-1.485 1.353-2.811 1.353c-1.326 0-2.251-.575-2.812-1.353A3.791 3.791 0 0 1 14 12a1 1 0 1 1 2 0c0 .257.085.664.311.978c.19.264.515.522 1.189.522s.999-.258 1.189-.522c.226-.314.311-.721.311-.978c0-1.173-.36-2.956-1.412-4.416C16.575 6.175 14.874 5 12 5S7.426 6.175 6.412 7.584z"/><path d="M12 10a2 2 0 1 0 0 4a2 2 0 0 0 0-4zm-4 2a4 4 0 1 1 8 0a4 4 0 0 1-8 0z"/></g></svg>
React
import type { SVGProps } from "react";
export function MajesticonsAtSymbolLine(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M6.412 7.584C5.36 9.044 5 10.827 5 12c0 1.173.36 2.956 1.412 4.416C7.426 17.825 9.126 19 12 19c1.98 0 3.385-.558 4.388-1.334a1 1 0 1 1 1.224 1.581C16.229 20.317 14.385 21 12 21c-3.526 0-5.826-1.491-7.212-3.416C3.44 15.711 3 13.494 3 12c0-1.493.44-3.711 1.788-5.584C6.174 4.492 8.474 3 12 3s5.826 1.492 7.212 3.416C20.56 8.289 21 10.506 21 12a3.79 3.79 0 0 1-.689 2.147c-.56.778-1.485 1.353-2.811 1.353c-1.326 0-2.251-.575-2.812-1.353A3.791 3.791 0 0 1 14 12a1 1 0 1 1 2 0c0 .257.085.664.311.978c.19.264.515.522 1.189.522s.999-.258 1.189-.522c.226-.314.311-.721.311-.978c0-1.173-.36-2.956-1.412-4.416C16.575 6.175 14.874 5 12 5S7.426 6.175 6.412 7.584z"/><path d="M12 10a2 2 0 1 0 0 4a2 2 0 0 0 0-4zm-4 2a4 4 0 1 1 8 0a4 4 0 0 1-8 0z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M6.412 7.584C5.36 9.044 5 10.827 5 12c0 1.173.36 2.956 1.412 4.416C7.426 17.825 9.126 19 12 19c1.98 0 3.385-.558 4.388-1.334a1 1 0 1 1 1.224 1.581C16.229 20.317 14.385 21 12 21c-3.526 0-5.826-1.491-7.212-3.416C3.44 15.711 3 13.494 3 12c0-1.493.44-3.711 1.788-5.584C6.174 4.492 8.474 3 12 3s5.826 1.492 7.212 3.416C20.56 8.289 21 10.506 21 12a3.79 3.79 0 0 1-.689 2.147c-.56.778-1.485 1.353-2.811 1.353c-1.326 0-2.251-.575-2.812-1.353A3.791 3.791 0 0 1 14 12a1 1 0 1 1 2 0c0 .257.085.664.311.978c.19.264.515.522 1.189.522s.999-.258 1.189-.522c.226-.314.311-.721.311-.978c0-1.173-.36-2.956-1.412-4.416C16.575 6.175 14.874 5 12 5S7.426 6.175 6.412 7.584z"/><path d="M12 10a2 2 0 1 0 0 4a2 2 0 0 0 0-4zm-4 2a4 4 0 1 1 8 0a4 4 0 0 1-8 0z"/></g></svg> </template>
CSS
.icon-at-symbol-line {
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%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M6.412%207.584C5.36%209.044%205%2010.827%205%2012c0%201.173.36%202.956%201.412%204.416C7.426%2017.825%209.126%2019%2012%2019c1.98%200%203.385-.558%204.388-1.334a1%201%200%201%201%201.224%201.581C16.229%2020.317%2014.385%2021%2012%2021c-3.526%200-5.826-1.491-7.212-3.416C3.44%2015.711%203%2013.494%203%2012c0-1.493.44-3.711%201.788-5.584C6.174%204.492%208.474%203%2012%203s5.826%201.492%207.212%203.416C20.56%208.289%2021%2010.506%2021%2012a3.79%203.79%200%200%201-.689%202.147c-.56.778-1.485%201.353-2.811%201.353c-1.326%200-2.251-.575-2.812-1.353A3.791%203.791%200%200%201%2014%2012a1%201%200%201%201%202%200c0%20.257.085.664.311.978c.19.264.515.522%201.189.522s.999-.258%201.189-.522c.226-.314.311-.721.311-.978c0-1.173-.36-2.956-1.412-4.416C16.575%206.175%2014.874%205%2012%205S7.426%206.175%206.412%207.584z%22%2F%3E%3Cpath%20d%3D%22M12%2010a2%202%200%201%200%200%204a2%202%200%200%200%200-4zm-4%202a4%204%200%201%201%208%200a4%204%200%200%201-8%200z%22%2F%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%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M6.412%207.584C5.36%209.044%205%2010.827%205%2012c0%201.173.36%202.956%201.412%204.416C7.426%2017.825%209.126%2019%2012%2019c1.98%200%203.385-.558%204.388-1.334a1%201%200%201%201%201.224%201.581C16.229%2020.317%2014.385%2021%2012%2021c-3.526%200-5.826-1.491-7.212-3.416C3.44%2015.711%203%2013.494%203%2012c0-1.493.44-3.711%201.788-5.584C6.174%204.492%208.474%203%2012%203s5.826%201.492%207.212%203.416C20.56%208.289%2021%2010.506%2021%2012a3.79%203.79%200%200%201-.689%202.147c-.56.778-1.485%201.353-2.811%201.353c-1.326%200-2.251-.575-2.812-1.353A3.791%203.791%200%200%201%2014%2012a1%201%200%201%201%202%200c0%20.257.085.664.311.978c.19.264.515.522%201.189.522s.999-.258%201.189-.522c.226-.314.311-.721.311-.978c0-1.173-.36-2.956-1.412-4.416C16.575%206.175%2014.874%205%2012%205S7.426%206.175%206.412%207.584z%22%2F%3E%3Cpath%20d%3D%22M12%2010a2%202%200%201%200%200%204a2%202%200%200%200%200-4zm-4%202a4%204%200%201%201%208%200a4%204%200%200%201-8%200z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/majesticons/at-symbol-line.svg?color=%231a73e8&size=48
