graphql logo

graphql from Material Icon Theme by Material Extensions · Color · MIT Free for personal and commercial use.

Name: graphql
Set: Material Icon Theme
Style: Color
Viewbox: 32×32
License: MIT

The same logo in other sets

graphql-fillAkar Icons graphqlBoxicons Brands graphqlCatppuccin Icons graphqlCoreUI Brands graphqlSVG Logos graphqlMaterial Design Icons graphqlSimple Icons graphql-darkSkill Icons graphql-outlineTeenyicons

Use the graphql logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#ec407a" d="M6 20h20v2H6z"/><circle cx="7" cy="21" r="3" fill="#ec407a"/><circle cx="16" cy="27" r="3" fill="#ec407a"/><circle cx="25" cy="21" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 10h20v2H6z"/><circle cx="7" cy="11" r="3" fill="#ec407a"/><circle cx="16" cy="5" r="3" fill="#ec407a"/><circle cx="25" cy="11" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 12h2v10H6zm18-2h2v12h-2z"/><path fill="#ec407a" d="m5.014 19.41l11.674 6.866L15.674 28L4 21.134z"/><path fill="#ec407a" d="M26.688 21.724L15.014 28.59L14 26.866L25.674 20zM5.124 10.382l11.415-7.29l1.077 1.686L6.2 12.068z"/><path fill="#ec407a" d="m25.798 12.067l-11.415-7.29l1.077-1.685l11.415 7.29zM6.2 19.932l11.416 7.29l-1.077 1.686l-11.415-7.29z"/><path fill="#ec407a" d="m26.875 21.619l-11.415 7.29l-1.077-1.687l11.415-7.289zM5.877 22.6L16.04 3.686l1.762.946L7.638 23.546z"/><path fill="#ec407a" d="M24.361 23.545L14.197 4.633l1.761-.947l10.165 18.913z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialIconThemeGraphql(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#ec407a" d="M6 20h20v2H6z"/><circle cx="7" cy="21" r="3" fill="#ec407a"/><circle cx="16" cy="27" r="3" fill="#ec407a"/><circle cx="25" cy="21" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 10h20v2H6z"/><circle cx="7" cy="11" r="3" fill="#ec407a"/><circle cx="16" cy="5" r="3" fill="#ec407a"/><circle cx="25" cy="11" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 12h2v10H6zm18-2h2v12h-2z"/><path fill="#ec407a" d="m5.014 19.41l11.674 6.866L15.674 28L4 21.134z"/><path fill="#ec407a" d="M26.688 21.724L15.014 28.59L14 26.866L25.674 20zM5.124 10.382l11.415-7.29l1.077 1.686L6.2 12.068z"/><path fill="#ec407a" d="m25.798 12.067l-11.415-7.29l1.077-1.685l11.415 7.29zM6.2 19.932l11.416 7.29l-1.077 1.686l-11.415-7.29z"/><path fill="#ec407a" d="m26.875 21.619l-11.415 7.29l-1.077-1.687l11.415-7.289zM5.877 22.6L16.04 3.686l1.762.946L7.638 23.546z"/><path fill="#ec407a" d="M24.361 23.545L14.197 4.633l1.761-.947l10.165 18.913z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#ec407a" d="M6 20h20v2H6z"/><circle cx="7" cy="21" r="3" fill="#ec407a"/><circle cx="16" cy="27" r="3" fill="#ec407a"/><circle cx="25" cy="21" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 10h20v2H6z"/><circle cx="7" cy="11" r="3" fill="#ec407a"/><circle cx="16" cy="5" r="3" fill="#ec407a"/><circle cx="25" cy="11" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 12h2v10H6zm18-2h2v12h-2z"/><path fill="#ec407a" d="m5.014 19.41l11.674 6.866L15.674 28L4 21.134z"/><path fill="#ec407a" d="M26.688 21.724L15.014 28.59L14 26.866L25.674 20zM5.124 10.382l11.415-7.29l1.077 1.686L6.2 12.068z"/><path fill="#ec407a" d="m25.798 12.067l-11.415-7.29l1.077-1.685l11.415 7.29zM6.2 19.932l11.416 7.29l-1.077 1.686l-11.415-7.29z"/><path fill="#ec407a" d="m26.875 21.619l-11.415 7.29l-1.077-1.687l11.415-7.289zM5.877 22.6L16.04 3.686l1.762.946L7.638 23.546z"/><path fill="#ec407a" d="M24.361 23.545L14.197 4.633l1.761-.947l10.165 18.913z"/></svg>
</template>

CSS

.icon-graphql {
  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%2032%2032%22%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M6%2020h20v2H6z%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2221%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2227%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2221%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M6%2010h20v2H6z%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2211%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2211%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M6%2012h2v10H6zm18-2h2v12h-2z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22m5.014%2019.41l11.674%206.866L15.674%2028L4%2021.134z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M26.688%2021.724L15.014%2028.59L14%2026.866L25.674%2020zM5.124%2010.382l11.415-7.29l1.077%201.686L6.2%2012.068z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22m25.798%2012.067l-11.415-7.29l1.077-1.685l11.415%207.29zM6.2%2019.932l11.416%207.29l-1.077%201.686l-11.415-7.29z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22m26.875%2021.619l-11.415%207.29l-1.077-1.687l11.415-7.289zM5.877%2022.6L16.04%203.686l1.762.946L7.638%2023.546z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M24.361%2023.545L14.197%204.633l1.761-.947l10.165%2018.913z%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%2032%2032%22%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M6%2020h20v2H6z%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2221%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2227%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2221%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M6%2010h20v2H6z%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2211%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2211%22%20r%3D%223%22%20fill%3D%22%23ec407a%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M6%2012h2v10H6zm18-2h2v12h-2z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22m5.014%2019.41l11.674%206.866L15.674%2028L4%2021.134z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M26.688%2021.724L15.014%2028.59L14%2026.866L25.674%2020zM5.124%2010.382l11.415-7.29l1.077%201.686L6.2%2012.068z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22m25.798%2012.067l-11.415-7.29l1.077-1.685l11.415%207.29zM6.2%2019.932l11.416%207.29l-1.077%201.686l-11.415-7.29z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22m26.875%2021.619l-11.415%207.29l-1.077-1.687l11.415-7.289zM5.877%2022.6L16.04%203.686l1.762.946L7.638%2023.546z%22%2F%3E%3Cpath%20fill%3D%22%23ec407a%22%20d%3D%22M24.361%2023.545L14.197%204.633l1.761-.947l10.165%2018.913z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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