mastodon logo

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

Name
mastodon
Set
Font Awesome 6 Brands
Style
Regular
Viewbox
448×512
License
CC BY 4.0

The same logo in other sets

mastodon-fillAkar Iconsmastodon-filledAnt Design IconsmastodonBootstrap IconsmastodonBoxicons BrandsmastodonCoreUI BrandsmastodonFont Awesome 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 448 512"><path fill="currentColor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7c-62.52-28.7-228.56-28.4-290.48 0c0 0-63.72 28.5-63.72 125.7c0 115.7-6.6 259.4 105.63 289.1c40.51 10.7 75.32 13 103.33 11.4c50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7c56.12-6.7 105-41.3 111.23-72.9c9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175c25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5l11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1c23.71 27.3 18.4 53 18.4 175z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6BrandsMastodon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7c-62.52-28.7-228.56-28.4-290.48 0c0 0-63.72 28.5-63.72 125.7c0 115.7-6.6 259.4 105.63 289.1c40.51 10.7 75.32 13 103.33 11.4c50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7c56.12-6.7 105-41.3 111.23-72.9c9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175c25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5l11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1c23.71 27.3 18.4 53 18.4 175z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7c-62.52-28.7-228.56-28.4-290.48 0c0 0-63.72 28.5-63.72 125.7c0 115.7-6.6 259.4 105.63 289.1c40.51 10.7 75.32 13 103.33 11.4c50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7c56.12-6.7 105-41.3 111.23-72.9c9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175c25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5l11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1c23.71 27.3 18.4 53 18.4 175z"/></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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M433%20179.11c0-97.2-63.71-125.7-63.71-125.7c-62.52-28.7-228.56-28.4-290.48%200c0%200-63.72%2028.5-63.72%20125.7c0%20115.7-6.6%20259.4%20105.63%20289.1c40.51%2010.7%2075.32%2013%20103.33%2011.4c50.81-2.8%2079.32-18.1%2079.32-18.1l-1.7-36.9s-36.31%2011.4-77.12%2010.1c-40.41-1.4-83-4.4-89.63-54a102.5%20102.5%200%200%201-.9-13.9c85.63%2020.9%20158.65%209.1%20178.75%206.7c56.12-6.7%20105-41.3%20111.23-72.9c9.8-49.8%209-121.5%209-121.5m-75.12%20125.2h-46.63v-114.2c0-49.7-64-51.6-64%206.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9%2018.41-175c25.9-28.9%2079.82-30.8%20103.83%206.1l11.6%2019.5l11.6-19.5c24.11-37.1%2078.12-34.8%20103.83-6.1c23.71%2027.3%2018.4%2053%2018.4%20175z%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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M433%20179.11c0-97.2-63.71-125.7-63.71-125.7c-62.52-28.7-228.56-28.4-290.48%200c0%200-63.72%2028.5-63.72%20125.7c0%20115.7-6.6%20259.4%20105.63%20289.1c40.51%2010.7%2075.32%2013%20103.33%2011.4c50.81-2.8%2079.32-18.1%2079.32-18.1l-1.7-36.9s-36.31%2011.4-77.12%2010.1c-40.41-1.4-83-4.4-89.63-54a102.5%20102.5%200%200%201-.9-13.9c85.63%2020.9%20158.65%209.1%20178.75%206.7c56.12-6.7%20105-41.3%20111.23-72.9c9.8-49.8%209-121.5%209-121.5m-75.12%20125.2h-46.63v-114.2c0-49.7-64-51.6-64%206.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9%2018.41-175c25.9-28.9%2079.82-30.8%20103.83%206.1l11.6%2019.5l11.6-19.5c24.11-37.1%2078.12-34.8%20103.83-6.1c23.71%2027.3%2018.4%2053%2018.4%20175z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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