hoppscotch · Devicon
Free SVG hoppscotch icon from Devicon. Rendered at 24×24 in the filled style and licensed under MIT. Copy directly as SVG, React (JSX), or Vue. Download as SVG or PNG. No login, no attribution required for MIT licensed icons.
Tags
- hoppscotch
Code
HTML / SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g transform="scale(0.1875) translate(0 0)"><defs><radialGradient id="SVGewDvpbhn" cx="0" cy="0" r="1" gradientTransform="rotate(125.613 62.77 33.464)scale(169.2567 188.01399)" gradientUnits="userSpaceOnUse"><stop stop-color="#00d196" stop-opacity=".5"/><stop offset=".997" stop-color="#00d196" stop-opacity="0"/></radialGradient><radialGradient id="SVGV7qKFYZZ" cx="0" cy="0" r="1" gradientTransform="rotate(159.984 45.353 35.593)scale(98.07689 59.8268)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="SVGxJS0pekx" x1="411.893" x2="411.893" y1="212" y2="612" gradientUnits="userSpaceOnUse"><stop stop-color="#00d196"/><stop offset="1" stop-color="#00b381"/></linearGradient><linearGradient id="SVG8zNPwqyr" x1="411.893" x2="411.893" y1="212" y2="612" gradientTransform="scale(.15534)" gradientUnits="userSpaceOnUse" href="#SVGxJS0pekx"/></defs><rect width="128" height="128" fill="#08110f" rx="28.583"/><rect width="128" height="128" fill="url(#SVGewDvpbhn)" fill-opacity=".5" rx="28.583"/><path fill="url(#SVG8zNPwqyr)" d="M63.752 32.934a34.44 34.44 0 0 0-22.236 8.34c-9.06-1.565-19.78-1.576-23.12 5.925c-3.745 8.411 5.438 18.094 18.747 26.512c1.884 8.139 7.43 15.329 15.625 18.977s17.253 2.959 24.556-1.084c15.162 4.256 28.501 4.601 32.246-3.811c3.34-7.5-3.841-15.461-11.066-21.148a34.41 34.41 0 0 0-20.469-30.711a34.5 34.5 0 0 0-14.283-3m.842 6.996c3.638.075 7.246.875 10.607 2.37c1.288.574 2.539 1.492 2.399 2.393c-.111.583-.436 1.266-2.893 1.274c-5.22.24-7.697 1.937-8.826 4.47c-1.128 2.535-.082 5.723 2.601 6.918c9.862 4.391 17.423 8.74 22.942 12.684c7.096 5.038 13.29 11.539 11.785 14.922c-1.82 4.086-16.978 4.585-43.738-7.328C32.71 65.718 22.938 54.118 24.758 50.03h.002c1.505-3.382 10.477-3.128 18.969-1.226c5.431-5.72 12.366-8.612 19.304-8.864q.78-.027 1.56-.011zM42.447 54.313c-1.457-.026-2.777.562-3.492 1.707c-1.205 1.927-.236 4.707 2.164 6.207s5.322 1.15 6.526-.778s.235-4.705-2.165-6.205c-.975-.61-2.036-.914-3.033-.931m19.725 11.226c-1.751-.013-3.3.794-3.94 2.229c-.93 2.088.422 4.718 3.02 5.875c2.597 1.156 5.457.4 6.387-1.688s-.424-4.717-3.022-5.873a6.1 6.1 0 0 0-2.445-.543m21.53 7.262c-2.046.014-3.808 1.084-4.298 2.79c-.626 2.186 1.07 4.588 3.79 5.368s5.433-.36 6.06-2.545s-1.07-4.588-3.79-5.367a6.3 6.3 0 0 0-1.763-.246z"/><path fill="url(#SVGV7qKFYZZ)" d="M63.752 32.934a34.44 34.44 0 0 0-22.236 8.34c-9.06-1.565-19.78-1.576-23.12 5.925c-3.745 8.411 5.438 18.094 18.747 26.512c1.884 8.139 7.43 15.329 15.625 18.977s17.253 2.959 24.556-1.084c15.162 4.256 28.501 4.601 32.246-3.811c3.34-7.5-3.841-15.461-11.066-21.148a34.41 34.41 0 0 0-20.469-30.711a34.5 34.5 0 0 0-14.283-3m.842 6.996c3.638.075 7.246.875 10.607 2.37c1.288.574 2.539 1.492 2.399 2.393c-.111.583-.436 1.266-2.893 1.274c-5.22.24-7.697 1.937-8.826 4.47c-1.128 2.535-.082 5.723 2.601 6.918c9.862 4.391 17.423 8.74 22.942 12.684c7.096 5.038 13.29 11.539 11.785 14.922c-1.82 4.086-16.978 4.585-43.738-7.328C32.71 65.718 22.938 54.118 24.758 50.03h.002c1.505-3.382 10.477-3.128 18.969-1.226c5.431-5.72 12.366-8.612 19.304-8.864q.78-.027 1.56-.011zM42.447 54.313c-1.457-.026-2.777.562-3.492 1.707c-1.205 1.927-.236 4.707 2.164 6.207s5.322 1.15 6.526-.778s.235-4.705-2.165-6.205c-.975-.61-2.036-.914-3.033-.931m19.725 11.226c-1.751-.013-3.3.794-3.94 2.229c-.93 2.088.422 4.718 3.02 5.875c2.597 1.156 5.457.4 6.387-1.688s-.424-4.717-3.022-5.873a6.1 6.1 0 0 0-2.445-.543m21.53 7.262c-2.046.014-3.808 1.084-4.298 2.79c-.626 2.186 1.07 4.588 3.79 5.368s5.433-.36 6.06-2.545s-1.07-4.588-3.79-5.367a6.3 6.3 0 0 0-1.763-.246z"/></g></svg>
React
// Run: npx sant-icons get devicon-hoppscotch --format react
export function DeviconHoppscotch(props) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" {...props}><g transform="scale(0.1875) translate(0 0)"><defs><radialGradient id="SVGewDvpbhn" cx="0" cy="0" r="1" gradientTransform="rotate(125.613 62.77 33.464)scale(169.2567 188.01399)" gradientUnits="userSpaceOnUse"><stop stop-color="#00d196" stop-opacity=".5"/><stop offset=".997" stop-color="#00d196" stop-opacity="0"/></radialGradient><radialGradient id="SVGV7qKFYZZ" cx="0" cy="0" r="1" gradientTransform="rotate(159.984 45.353 35.593)scale(98.07689 59.8268)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="SVGxJS0pekx" x1="411.893" x2="411.893" y1="212" y2="612" gradientUnits="userSpaceOnUse"><stop stop-color="#00d196"/><stop offset="1" stop-color="#00b381"/></linearGradient><linearGradient id="SVG8zNPwqyr" x1="411.893" x2="411.893" y1="212" y2="612" gradientTransform="scale(.15534)" gradientUnits="userSpaceOnUse" href="#SVGxJS0pekx"/></defs><rect width="128" height="128" fill="#08110f" rx="28.583"/><rect width="128" height="128" fill="url(#SVGewDvpbhn)" fill-opacity=".5" rx="28.583"/><path fill="url(#SVG8zNPwqyr)" d="M63.752 32.934a34.44 34.44 0 0 0-22.236 8.34c-9.06-1.565-19.78-1.576-23.12 5.925c-3.745 8.411 5.438 18.094 18.747 26.512c1.884 8.139 7.43 15.329 15.625 18.977s17.253 2.959 24.556-1.084c15.162 4.256 28.501 4.601 32.246-3.811c3.34-7.5-3.841-15.461-11.066-21.148a34.41 34.41 0 0 0-20.469-30.711a34.5 34.5 0 0 0-14.283-3m.842 6.996c3.638.075 7.246.875 10.607 2.37c1.288.574 2.539 1.492 2.399 2.393c-.111.583-.436 1.266-2.893 1.274c-5.22.24-7.697 1.937-8.826 4.47c-1.128 2.535-.082 5.723 2.601 6.918c9.862 4.391 17.423 8.74 22.942 12.684c7.096 5.038 13.29 11.539 11.785 14.922c-1.82 4.086-16.978 4.585-43.738-7.328C32.71 65.718 22.938 54.118 24.758 50.03h.002c1.505-3.382 10.477-3.128 18.969-1.226c5.431-5.72 12.366-8.612 19.304-8.864q.78-.027 1.56-.011zM42.447 54.313c-1.457-.026-2.777.562-3.492 1.707c-1.205 1.927-.236 4.707 2.164 6.207s5.322 1.15 6.526-.778s.235-4.705-2.165-6.205c-.975-.61-2.036-.914-3.033-.931m19.725 11.226c-1.751-.013-3.3.794-3.94 2.229c-.93 2.088.422 4.718 3.02 5.875c2.597 1.156 5.457.4 6.387-1.688s-.424-4.717-3.022-5.873a6.1 6.1 0 0 0-2.445-.543m21.53 7.262c-2.046.014-3.808 1.084-4.298 2.79c-.626 2.186 1.07 4.588 3.79 5.368s5.433-.36 6.06-2.545s-1.07-4.588-3.79-5.367a6.3 6.3 0 0 0-1.763-.246z"/><path fill="url(#SVGV7qKFYZZ)" d="M63.752 32.934a34.44 34.44 0 0 0-22.236 8.34c-9.06-1.565-19.78-1.576-23.12 5.925c-3.745 8.411 5.438 18.094 18.747 26.512c1.884 8.139 7.43 15.329 15.625 18.977s17.253 2.959 24.556-1.084c15.162 4.256 28.501 4.601 32.246-3.811c3.34-7.5-3.841-15.461-11.066-21.148a34.41 34.41 0 0 0-20.469-30.711a34.5 34.5 0 0 0-14.283-3m.842 6.996c3.638.075 7.246.875 10.607 2.37c1.288.574 2.539 1.492 2.399 2.393c-.111.583-.436 1.266-2.893 1.274c-5.22.24-7.697 1.937-8.826 4.47c-1.128 2.535-.082 5.723 2.601 6.918c9.862 4.391 17.423 8.74 22.942 12.684c7.096 5.038 13.29 11.539 11.785 14.922c-1.82 4.086-16.978 4.585-43.738-7.328C32.71 65.718 22.938 54.118 24.758 50.03h.002c1.505-3.382 10.477-3.128 18.969-1.226c5.431-5.72 12.366-8.612 19.304-8.864q.78-.027 1.56-.011zM42.447 54.313c-1.457-.026-2.777.562-3.492 1.707c-1.205 1.927-.236 4.707 2.164 6.207s5.322 1.15 6.526-.778s.235-4.705-2.165-6.205c-.975-.61-2.036-.914-3.033-.931m19.725 11.226c-1.751-.013-3.3.794-3.94 2.229c-.93 2.088.422 4.718 3.02 5.875c2.597 1.156 5.457.4 6.387-1.688s-.424-4.717-3.022-5.873a6.1 6.1 0 0 0-2.445-.543m21.53 7.262c-2.046.014-3.808 1.084-4.298 2.79c-.626 2.186 1.07 4.588 3.79 5.368s5.433-.36 6.06-2.545s-1.07-4.588-3.79-5.367a6.3 6.3 0 0 0-1.763-.246z"/></g></svg>
);
}CLI
npx sant-icons get devicon-hoppscotch
Properties
hoppscotch in other libraries
The hoppscotch icon ships with Devicon, an open-source icon set licensed under MIT. Search for it as "devicon hoppscotch", "hoppscotch svg", or any of its tagged terms (hoppscotch). The SVG is normalised to a 24×24 viewBox so you can drop it into any UI framework alongside the other icons here without scaling concerns.
Need this icon in your codebase fast? Install the MCP server for Claude Code (or any MCP-aware AI tool) and ask the model to fetch devicon-hoppscotch directly into your project. No browser context-switch.