gatsby logo

gatsby from Devicon by konpa · Original · MIT Free for personal and commercial use.

Name: gatsby
Set: Devicon
Style: Original
Viewbox: 128×128
License: MIT

1 other variant in Devicon

The same logo in other sets

gatsby-fillAkar Icons gatsbyCatppuccin Icons gatsbySVG Logos gatsbyMaterial Design Icons gatsby-fillRemix Icon gatsbySimple Icons gatsbySkill Icons

Use the gatsby logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#64328b" d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64s64-28.7 64-64S99.3 0 64 0M13.2 64L64 114.8c-28.1 0-50.8-22.7-50.8-50.8m62.2 49.5l-60.9-61C19.7 30 39.9 13.2 64 13.2c16.6 0 31.3 7.9 40.5 20.2L97 40.6c-7.3-10.4-19.3-17.1-33-17.1c-17.6 0-32.5 11.2-38.1 26.8C33.1 57 75.4 98.8 78.1 102c12.7-4.7 22.3-15.5 25.4-28.9H81.9v-9.4l33 .2c-.1 24.3-16.9 44.5-39.5 49.6"/></svg>

React

import type { SVGProps } from "react";

export function DeviconGatsby(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#64328b" d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64s64-28.7 64-64S99.3 0 64 0M13.2 64L64 114.8c-28.1 0-50.8-22.7-50.8-50.8m62.2 49.5l-60.9-61C19.7 30 39.9 13.2 64 13.2c16.6 0 31.3 7.9 40.5 20.2L97 40.6c-7.3-10.4-19.3-17.1-33-17.1c-17.6 0-32.5 11.2-38.1 26.8C33.1 57 75.4 98.8 78.1 102c12.7-4.7 22.3-15.5 25.4-28.9H81.9v-9.4l33 .2c-.1 24.3-16.9 44.5-39.5 49.6"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#64328b" d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64s64-28.7 64-64S99.3 0 64 0M13.2 64L64 114.8c-28.1 0-50.8-22.7-50.8-50.8m62.2 49.5l-60.9-61C19.7 30 39.9 13.2 64 13.2c16.6 0 31.3 7.9 40.5 20.2L97 40.6c-7.3-10.4-19.3-17.1-33-17.1c-17.6 0-32.5 11.2-38.1 26.8C33.1 57 75.4 98.8 78.1 102c12.7-4.7 22.3-15.5 25.4-28.9H81.9v-9.4l33 .2c-.1 24.3-16.9 44.5-39.5 49.6"/></svg>
</template>

CSS

.icon-gatsby {
  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%20128%20128%22%3E%3Cpath%20fill%3D%22%2364328b%22%20d%3D%22M64%200C28.7%200%200%2028.7%200%2064s28.7%2064%2064%2064s64-28.7%2064-64S99.3%200%2064%200M13.2%2064L64%20114.8c-28.1%200-50.8-22.7-50.8-50.8m62.2%2049.5l-60.9-61C19.7%2030%2039.9%2013.2%2064%2013.2c16.6%200%2031.3%207.9%2040.5%2020.2L97%2040.6c-7.3-10.4-19.3-17.1-33-17.1c-17.6%200-32.5%2011.2-38.1%2026.8C33.1%2057%2075.4%2098.8%2078.1%20102c12.7-4.7%2022.3-15.5%2025.4-28.9H81.9v-9.4l33%20.2c-.1%2024.3-16.9%2044.5-39.5%2049.6%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%20128%20128%22%3E%3Cpath%20fill%3D%22%2364328b%22%20d%3D%22M64%200C28.7%200%200%2028.7%200%2064s28.7%2064%2064%2064s64-28.7%2064-64S99.3%200%2064%200M13.2%2064L64%20114.8c-28.1%200-50.8-22.7-50.8-50.8m62.2%2049.5l-60.9-61C19.7%2030%2039.9%2013.2%2064%2013.2c16.6%200%2031.3%207.9%2040.5%2020.2L97%2040.6c-7.3-10.4-19.3-17.1-33-17.1c-17.6%200-32.5%2011.2-38.1%2026.8C33.1%2057%2075.4%2098.8%2078.1%20102c12.7-4.7%2022.3-15.5%2025.4-28.9H81.9v-9.4l33%20.2c-.1%2024.3-16.9%2044.5-39.5%2049.6%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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