gatsby logo
gatsby from Skill Icons by tandpfun · Default · MIT Free for personal and commercial use.
- Name
- gatsby
- Set
- Skill Icons
- Style
- Default
- Viewbox
- 256×256
- License
- MIT
The same logo in other sets
Use the gatsby logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#639" rx="60"/><path fill="#fff" d="M228 128h-63.636v18.182H208c-6.364 27.273-26.364 50-52.727 59.091L50.727 100.727C61.637 68.909 92.546 46.182 128 46.182c27.273 0 51.818 13.636 67.273 34.545l13.636-11.818C190.727 44.364 161.636 28 128 28c-47.273 0-87.273 33.636-97.273 78.182l120 120C194.364 215.273 228 175.273 228 128m-200 .909c0 25.455 10 50 29.09 69.091c19.092 19.091 44.546 29.091 69.092 29.091z"/></g></svg>
React
import type { SVGProps } from "react";
export function SkillIconsGatsby(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#639" rx="60"/><path fill="#fff" d="M228 128h-63.636v18.182H208c-6.364 27.273-26.364 50-52.727 59.091L50.727 100.727C61.637 68.909 92.546 46.182 128 46.182c27.273 0 51.818 13.636 67.273 34.545l13.636-11.818C190.727 44.364 161.636 28 128 28c-47.273 0-87.273 33.636-97.273 78.182l120 120C194.364 215.273 228 175.273 228 128m-200 .909c0 25.455 10 50 29.09 69.091c19.092 19.091 44.546 29.091 69.092 29.091z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#639" rx="60"/><path fill="#fff" d="M228 128h-63.636v18.182H208c-6.364 27.273-26.364 50-52.727 59.091L50.727 100.727C61.637 68.909 92.546 46.182 128 46.182c27.273 0 51.818 13.636 67.273 34.545l13.636-11.818C190.727 44.364 161.636 28 128 28c-47.273 0-87.273 33.636-97.273 78.182l120 120C194.364 215.273 228 175.273 228 128m-200 .909c0 25.455 10 50 29.09 69.091c19.092 19.091 44.546 29.091 69.092 29.091z"/></g></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%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23639%22%20rx%3D%2260%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M228%20128h-63.636v18.182H208c-6.364%2027.273-26.364%2050-52.727%2059.091L50.727%20100.727C61.637%2068.909%2092.546%2046.182%20128%2046.182c27.273%200%2051.818%2013.636%2067.273%2034.545l13.636-11.818C190.727%2044.364%20161.636%2028%20128%2028c-47.273%200-87.273%2033.636-97.273%2078.182l120%20120C194.364%20215.273%20228%20175.273%20228%20128m-200%20.909c0%2025.455%2010%2050%2029.09%2069.091c19.092%2019.091%2044.546%2029.091%2069.092%2029.091z%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23639%22%20rx%3D%2260%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M228%20128h-63.636v18.182H208c-6.364%2027.273-26.364%2050-52.727%2059.091L50.727%20100.727C61.637%2068.909%2092.546%2046.182%20128%2046.182c27.273%200%2051.818%2013.636%2067.273%2034.545l13.636-11.818C190.727%2044.364%20161.636%2028%20128%2028c-47.273%200-87.273%2033.636-97.273%2078.182l120%20120C194.364%20215.273%20228%20175.273%20228%20128m-200%20.909c0%2025.455%2010%2050%2029.09%2069.091c19.092%2019.091%2044.546%2029.091%2069.092%2029.091z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/skill-icons/gatsby.svg?color=%231a73e8&size=48
