mastodon filled icon
mastodon-filled from Material Line Icons by Vjacheslav Trushkin · Line · Social · MIT Free for personal and commercial use.
- Name
- mastodon-filled
- Set
- Material Line Icons
- Style
- Line
- Category
- Social
- Viewbox
- 24×24
- License
- MIT
More social icons from Material Line Icons
atblueskybluesky-filledbluesky-twotonebuy-me-a-coffeebuy-me-a-coffee-filledbuy-me-a-coffee-twotonediscorddiscord-twotoneemailemail-alertemail-alert-filledemail-alert-twotoneemail-alt-filledemail-alt-twotoneemail-arrow-downemail-arrow-down-filledemail-arrow-down-twotoneemail-arrow-leftemail-arrow-left-filledemail-arrow-left-twotoneemail-arrow-rightemail-arrow-right-filledemail-arrow-right-twotone
Use the mastodon filled icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><defs><mask id="SVGihdCvcnG"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path fill="#fff" fill-opacity="0" stroke="#fff" stroke-dasharray="82" d="M15.5 21.5c-10.5 2.5 -12.5 -2.5 -12.5 -8.5v-3c0 -6 2.5 -7 7 -7h4c4.5 0 7 1.5 7 5.5v4c0 6.5 -10 4 -13.5 4c-1 0 -1.5 7 8 5Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="82;0"/><animate fill="freeze" attributeName="fill-opacity" begin="0.6s" dur="0.4s" to="1"/></path><path fill="none" stroke="#000" stroke-dasharray="32" stroke-dashoffset="32" d="M7 13.5l0 -5.5c0 0 0.5 -2 2.5 -2c2 0 2.5 2 2.5 2l0 2.5l0 -2.5c0 0 0.5 -2 2.5 -2c2 0 2.5 2 2.5 2l0 5.5"><animate fill="freeze" attributeName="stroke-dashoffset" begin="1.1s" dur="0.6s" to="0"/></path></g></mask></defs><path fill="currentColor" d="M0 0h24v24H0z" mask="url(#SVGihdCvcnG)"/></svg>
React
import type { SVGProps } from "react";
export function LineMdMastodonFilled(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><defs><mask id="SVGihdCvcnG"><g strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"><path fill="#fff" fillOpacity="0" stroke="#fff" strokeDasharray="82" d="M15.5 21.5c-10.5 2.5 -12.5 -2.5 -12.5 -8.5v-3c0 -6 2.5 -7 7 -7h4c4.5 0 7 1.5 7 5.5v4c0 6.5 -10 4 -13.5 4c-1 0 -1.5 7 8 5Z"><animate fill="freeze" attributeName="strokeDashoffset" dur="0.6s" values="82;0"/><animate fill="freeze" attributeName="fillOpacity" begin="0.6s" dur="0.4s" to="1"/></path><path fill="none" stroke="#000" strokeDasharray="32" strokeDashoffset="32" d="M7 13.5l0 -5.5c0 0 0.5 -2 2.5 -2c2 0 2.5 2 2.5 2l0 2.5l0 -2.5c0 0 0.5 -2 2.5 -2c2 0 2.5 2 2.5 2l0 5.5"><animate fill="freeze" attributeName="strokeDashoffset" begin="1.1s" dur="0.6s" to="0"/></path></g></mask></defs><path fill="currentColor" d="M0 0h24v24H0z" mask="url(#SVGihdCvcnG)"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><defs><mask id="SVGihdCvcnG"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path fill="#fff" fill-opacity="0" stroke="#fff" stroke-dasharray="82" d="M15.5 21.5c-10.5 2.5 -12.5 -2.5 -12.5 -8.5v-3c0 -6 2.5 -7 7 -7h4c4.5 0 7 1.5 7 5.5v4c0 6.5 -10 4 -13.5 4c-1 0 -1.5 7 8 5Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="82;0"/><animate fill="freeze" attributeName="fill-opacity" begin="0.6s" dur="0.4s" to="1"/></path><path fill="none" stroke="#000" stroke-dasharray="32" stroke-dashoffset="32" d="M7 13.5l0 -5.5c0 0 0.5 -2 2.5 -2c2 0 2.5 2 2.5 2l0 2.5l0 -2.5c0 0 0.5 -2 2.5 -2c2 0 2.5 2 2.5 2l0 5.5"><animate fill="freeze" attributeName="stroke-dashoffset" begin="1.1s" dur="0.6s" to="0"/></path></g></mask></defs><path fill="currentColor" d="M0 0h24v24H0z" mask="url(#SVGihdCvcnG)"/></svg> </template>
CSS
.icon-mastodon-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%2024%2024%22%3E%3Cdefs%3E%3Cmask%20id%3D%22SVGihdCvcnG%22%3E%3Cg%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%220%22%20stroke%3D%22%23fff%22%20stroke-dasharray%3D%2282%22%20d%3D%22M15.5%2021.5c-10.5%202.5%20-12.5%20-2.5%20-12.5%20-8.5v-3c0%20-6%202.5%20-7%207%20-7h4c4.5%200%207%201.5%207%205.5v4c0%206.5%20-10%204%20-13.5%204c-1%200%20-1.5%207%208%205Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20dur%3D%220.6s%22%20values%3D%2282%3B0%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22fill-opacity%22%20begin%3D%220.6s%22%20dur%3D%220.4s%22%20to%3D%221%22%2F%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-dasharray%3D%2232%22%20stroke-dashoffset%3D%2232%22%20d%3D%22M7%2013.5l0%20-5.5c0%200%200.5%20-2%202.5%20-2c2%200%202.5%202%202.5%202l0%202.5l0%20-2.5c0%200%200.5%20-2%202.5%20-2c2%200%202.5%202%202.5%202l0%205.5%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20begin%3D%221.1s%22%20dur%3D%220.6s%22%20to%3D%220%22%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%200h24v24H0z%22%20mask%3D%22url(%23SVGihdCvcnG)%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%2024%2024%22%3E%3Cdefs%3E%3Cmask%20id%3D%22SVGihdCvcnG%22%3E%3Cg%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%220%22%20stroke%3D%22%23fff%22%20stroke-dasharray%3D%2282%22%20d%3D%22M15.5%2021.5c-10.5%202.5%20-12.5%20-2.5%20-12.5%20-8.5v-3c0%20-6%202.5%20-7%207%20-7h4c4.5%200%207%201.5%207%205.5v4c0%206.5%20-10%204%20-13.5%204c-1%200%20-1.5%207%208%205Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20dur%3D%220.6s%22%20values%3D%2282%3B0%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22fill-opacity%22%20begin%3D%220.6s%22%20dur%3D%220.4s%22%20to%3D%221%22%2F%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-dasharray%3D%2232%22%20stroke-dashoffset%3D%2232%22%20d%3D%22M7%2013.5l0%20-5.5c0%200%200.5%20-2%202.5%20-2c2%200%202.5%202%202.5%202l0%202.5l0%20-2.5c0%200%200.5%20-2%202.5%20-2c2%200%202.5%202%202.5%202l0%205.5%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20begin%3D%221.1s%22%20dur%3D%220.6s%22%20to%3D%220%22%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%200h24v24H0z%22%20mask%3D%22url(%23SVGihdCvcnG)%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/line-md/mastodon-filled.svg?color=%231a73e8&size=48
