gatsby logo

gatsby from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name: gatsby
Set: SVG Logos
Style: Color
Viewbox: 256×256
License: CC0

The same logo in other sets

gatsby-fillAkar Icons gatsbyCatppuccin Icons gatsbyCoreUI Brands gatsbyDevicon gatsbyMaterial Icon Theme 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 256 256"><path fill="#744c9e" d="M128 0C57.308 0 0 57.307 0 128s57.308 128 128 128s128-57.307 128-128S198.693 0 128 0M27.504 129.334l99.161 99.162c-54.45-.71-98.452-44.71-99.161-99.162m122.992 96.65l-120.48-120.48C40.234 60.824 80.223 27.487 128 27.487c33.397 0 62.985 16.293 81.263 41.36l-13.917 12.279C180.52 59.864 155.886 45.949 128 45.949c-35.505 0-65.74 22.552-77.169 54.113L155.94 205.169c25.525-9.243 45.156-30.79 51.73-57.477h-43.566V128h64.41c0 47.778-33.336 87.767-78.017 97.983"/></svg>

React

import type { SVGProps } from "react";

export function LogosGatsby(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#744c9e" d="M128 0C57.308 0 0 57.307 0 128s57.308 128 128 128s128-57.307 128-128S198.693 0 128 0M27.504 129.334l99.161 99.162c-54.45-.71-98.452-44.71-99.161-99.162m122.992 96.65l-120.48-120.48C40.234 60.824 80.223 27.487 128 27.487c33.397 0 62.985 16.293 81.263 41.36l-13.917 12.279C180.52 59.864 155.886 45.949 128 45.949c-35.505 0-65.74 22.552-77.169 54.113L155.94 205.169c25.525-9.243 45.156-30.79 51.73-57.477h-43.566V128h64.41c0 47.778-33.336 87.767-78.017 97.983"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#744c9e" d="M128 0C57.308 0 0 57.307 0 128s57.308 128 128 128s128-57.307 128-128S198.693 0 128 0M27.504 129.334l99.161 99.162c-54.45-.71-98.452-44.71-99.161-99.162m122.992 96.65l-120.48-120.48C40.234 60.824 80.223 27.487 128 27.487c33.397 0 62.985 16.293 81.263 41.36l-13.917 12.279C180.52 59.864 155.886 45.949 128 45.949c-35.505 0-65.74 22.552-77.169 54.113L155.94 205.169c25.525-9.243 45.156-30.79 51.73-57.477h-43.566V128h64.41c0 47.778-33.336 87.767-78.017 97.983"/></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%20256%20256%22%3E%3Cpath%20fill%3D%22%23744c9e%22%20d%3D%22M128%200C57.308%200%200%2057.307%200%20128s57.308%20128%20128%20128s128-57.307%20128-128S198.693%200%20128%200M27.504%20129.334l99.161%2099.162c-54.45-.71-98.452-44.71-99.161-99.162m122.992%2096.65l-120.48-120.48C40.234%2060.824%2080.223%2027.487%20128%2027.487c33.397%200%2062.985%2016.293%2081.263%2041.36l-13.917%2012.279C180.52%2059.864%20155.886%2045.949%20128%2045.949c-35.505%200-65.74%2022.552-77.169%2054.113L155.94%20205.169c25.525-9.243%2045.156-30.79%2051.73-57.477h-43.566V128h64.41c0%2047.778-33.336%2087.767-78.017%2097.983%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%20256%20256%22%3E%3Cpath%20fill%3D%22%23744c9e%22%20d%3D%22M128%200C57.308%200%200%2057.307%200%20128s57.308%20128%20128%20128s128-57.307%20128-128S198.693%200%20128%200M27.504%20129.334l99.161%2099.162c-54.45-.71-98.452-44.71-99.161-99.162m122.992%2096.65l-120.48-120.48C40.234%2060.824%2080.223%2027.487%20128%2027.487c33.397%200%2062.985%2016.293%2081.263%2041.36l-13.917%2012.279C180.52%2059.864%20155.886%2045.949%20128%2045.949c-35.505%200-65.74%2022.552-77.169%2054.113L155.94%20205.169c25.525-9.243%2045.156-30.79%2051.73-57.477h-43.566V128h64.41c0%2047.778-33.336%2087.767-78.017%2097.983%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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