mastodon logo

mastodon from Font Awesome Brands by Dave Gandy · Brand · CC-BY-4.0 Attribution required.

Name
mastodon
Set
Font Awesome Brands
Style
Brand
Viewbox
640×640
License
CC BY 4.0

The same logo in other sets

mastodon-fillAkar Iconsmastodon-filledAnt Design IconsmastodonBootstrap IconsmastodonBoxicons BrandsmastodonCoreUI BrandsmastodonFont Awesome 6 BrandsmastodonHuge IconsmastodonIconoirmastodonLine AwesomemastodonMaterial Line IconsmastodonSVG LogosmastodonMaterial Design Iconsmastodon-fillMingCute IconmastodonOpenMojimastodonPixelarticonsmastodon-fillRemix IconmastodonSimple Iconsmastodon-darkSkill Icons

Use the mastodon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M529 243.1c0-97.2-63.7-125.7-63.7-125.7c-62.5-28.7-228.6-28.4-290.5 0c0 0-63.7 28.5-63.7 125.7c0 115.7-6.6 259.4 105.6 289.1c40.5 10.7 75.3 13 103.3 11.4c50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54c-.6-4.6-.9-9.3-.9-13.9c85.6 20.9 158.7 9.1 178.7 6.7c56.1-6.7 105-41.3 111.2-72.9c9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6V254.1c0-49.7-64-51.6-64 6.9v62.5H297V261c0-58.5-64-56.6-64-6.9v114.2h-46.7c0-122.1-5.2-147.9 18.4-175c25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5l11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1c23.7 27.3 18.4 53 18.4 175"/></svg>

React

import type { SVGProps } from "react";

export function Fa7BrandsMastodon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M529 243.1c0-97.2-63.7-125.7-63.7-125.7c-62.5-28.7-228.6-28.4-290.5 0c0 0-63.7 28.5-63.7 125.7c0 115.7-6.6 259.4 105.6 289.1c40.5 10.7 75.3 13 103.3 11.4c50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54c-.6-4.6-.9-9.3-.9-13.9c85.6 20.9 158.7 9.1 178.7 6.7c56.1-6.7 105-41.3 111.2-72.9c9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6V254.1c0-49.7-64-51.6-64 6.9v62.5H297V261c0-58.5-64-56.6-64-6.9v114.2h-46.7c0-122.1-5.2-147.9 18.4-175c25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5l11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1c23.7 27.3 18.4 53 18.4 175"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M529 243.1c0-97.2-63.7-125.7-63.7-125.7c-62.5-28.7-228.6-28.4-290.5 0c0 0-63.7 28.5-63.7 125.7c0 115.7-6.6 259.4 105.6 289.1c40.5 10.7 75.3 13 103.3 11.4c50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54c-.6-4.6-.9-9.3-.9-13.9c85.6 20.9 158.7 9.1 178.7 6.7c56.1-6.7 105-41.3 111.2-72.9c9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6V254.1c0-49.7-64-51.6-64 6.9v62.5H297V261c0-58.5-64-56.6-64-6.9v114.2h-46.7c0-122.1-5.2-147.9 18.4-175c25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5l11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1c23.7 27.3 18.4 53 18.4 175"/></svg>
</template>

CSS

.icon-mastodon {
  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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M529%20243.1c0-97.2-63.7-125.7-63.7-125.7c-62.5-28.7-228.6-28.4-290.5%200c0%200-63.7%2028.5-63.7%20125.7c0%20115.7-6.6%20259.4%20105.6%20289.1c40.5%2010.7%2075.3%2013%20103.3%2011.4c50.8-2.8%2079.3-18.1%2079.3-18.1l-1.7-36.9s-36.3%2011.4-77.1%2010.1c-40.4-1.4-83-4.4-89.6-54c-.6-4.6-.9-9.3-.9-13.9c85.6%2020.9%20158.7%209.1%20178.7%206.7c56.1-6.7%20105-41.3%20111.2-72.9c9.8-49.8%209-121.5%209-121.5zm-75.1%20125.2h-46.6V254.1c0-49.7-64-51.6-64%206.9v62.5H297V261c0-58.5-64-56.6-64-6.9v114.2h-46.7c0-122.1-5.2-147.9%2018.4-175c25.9-28.9%2079.8-30.8%20103.8%206.1l11.6%2019.5l11.6-19.5c24.1-37.1%2078.1-34.8%20103.8-6.1c23.7%2027.3%2018.4%2053%2018.4%20175%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M529%20243.1c0-97.2-63.7-125.7-63.7-125.7c-62.5-28.7-228.6-28.4-290.5%200c0%200-63.7%2028.5-63.7%20125.7c0%20115.7-6.6%20259.4%20105.6%20289.1c40.5%2010.7%2075.3%2013%20103.3%2011.4c50.8-2.8%2079.3-18.1%2079.3-18.1l-1.7-36.9s-36.3%2011.4-77.1%2010.1c-40.4-1.4-83-4.4-89.6-54c-.6-4.6-.9-9.3-.9-13.9c85.6%2020.9%20158.7%209.1%20178.7%206.7c56.1-6.7%20105-41.3%20111.2-72.9c9.8-49.8%209-121.5%209-121.5zm-75.1%20125.2h-46.6V254.1c0-49.7-64-51.6-64%206.9v62.5H297V261c0-58.5-64-56.6-64-6.9v114.2h-46.7c0-122.1-5.2-147.9%2018.4-175c25.9-28.9%2079.8-30.8%20103.8%206.1l11.6%2019.5l11.6-19.5c24.1-37.1%2078.1-34.8%20103.8-6.1c23.7%2027.3%2018.4%2053%2018.4%20175%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-brands/mastodon.svg?color=%231a73e8&size=48