gentleface

Gentleface › Development › sandbox

sandbox icon

Sandbox: sandbox, test environment. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.856 1.144C11.952 1.241 12 1.359 12 1.5C12 1.641 11.952 1.759 11.856 1.856C11.759 1.952 11.641 2 11.5 2L10.924 2L10.424 5L10.484 5C10.893 5 11.267 5.115 11.606 5.344C11.944 5.573 12.19 5.878 12.341 6.257L13.593 9.386C13.864 10.064 14 10.769 14 11.5L14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15L3 15C2.746 15 2.5 14.953 2.264 14.86C2.007 14.758 1.781 14.609 1.586 14.414C1.391 14.219 1.242 13.993 1.14 13.736C1.047 13.5 1 13.254 1 13L1 11.5C1 10.769 1.136 10.064 1.407 9.386L2.659 6.257C2.81 5.878 3.056 5.573 3.394 5.344C3.733 5.115 4.107 5 4.516 5L9.41 5L9.91 2L9.5 2C9.359 2 9.241 1.952 9.144 1.856C9.048 1.759 9 1.641 9 1.5C9 1.359 9.048 1.241 9.144 1.144C9.241 1.048 9.359 1 9.5 1L11.5 1C11.641 1 11.759 1.048 11.856 1.144ZM3.955 6.172C3.786 6.287 3.663 6.439 3.587 6.629L2.336 9.757C2.303 9.838 2.274 9.919 2.246 10L12.754 10C12.726 9.919 12.697 9.838 12.664 9.757L11.413 6.629C11.337 6.439 11.214 6.287 11.045 6.172C10.876 6.057 10.689 6 10.484 6L10.257 6L9.993 7.582C9.97 7.718 9.903 7.827 9.791 7.907C9.678 7.987 9.554 8.016 9.418 7.993C9.279 7.97 9.17 7.903 9.091 7.792C9.012 7.682 8.984 7.557 9.007 7.418L9.243 6L4.516 6C4.311 6 4.124 6.057 3.955 6.172ZM3.497 8C3.497 7.864 3.547 7.746 3.646 7.646C4.244 7.049 4.883 6.75 5.563 6.75C6.205 6.75 6.943 7.028 7.777 7.584C8.443 8.028 8.997 8.25 9.438 8.25C9.64 8.25 9.835 8.204 10.024 8.113C10.226 8.015 10.434 7.859 10.646 7.646C10.746 7.547 10.864 7.497 11 7.497C11.136 7.497 11.254 7.547 11.354 7.646C11.451 7.744 11.5 7.862 11.5 8C11.5 8.138 11.451 8.256 11.354 8.354C10.756 8.951 10.117 9.25 9.438 9.25C8.795 9.25 8.057 8.972 7.223 8.416C6.557 7.972 6.003 7.75 5.563 7.75C5.36 7.75 5.165 7.796 4.976 7.887C4.774 7.985 4.566 8.141 4.354 8.354C4.256 8.451 4.138 8.5 4 8.5C3.862 8.5 3.744 8.451 3.646 8.354C3.547 8.254 3.497 8.136 3.497 8ZM2.293 13.707C2.488 13.902 2.724 14 3 14L12 14C12.276 14 12.512 13.902 12.707 13.707C12.902 13.512 13 13.276 13 13L13 11.5C13 11.332 12.991 11.165 12.974 11L2.026 11C2.009 11.165 2 11.332 2 11.5L2 13C2 13.276 2.098 13.512 2.293 13.707Z"/></svg>
React
// Gentleface "sandbox" (line-round), MIT. https://gentleface.com/icons/sandbox
import type { SVGProps } from 'react';

export function SandboxIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M11.856 1.144C11.952 1.241 12 1.359 12 1.5C12 1.641 11.952 1.759 11.856 1.856C11.759 1.952 11.641 2 11.5 2L10.924 2L10.424 5L10.484 5C10.893 5 11.267 5.115 11.606 5.344C11.944 5.573 12.19 5.878 12.341 6.257L13.593 9.386C13.864 10.064 14 10.769 14 11.5L14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15L3 15C2.746 15 2.5 14.953 2.264 14.86C2.007 14.758 1.781 14.609 1.586 14.414C1.391 14.219 1.242 13.993 1.14 13.736C1.047 13.5 1 13.254 1 13L1 11.5C1 10.769 1.136 10.064 1.407 9.386L2.659 6.257C2.81 5.878 3.056 5.573 3.394 5.344C3.733 5.115 4.107 5 4.516 5L9.41 5L9.91 2L9.5 2C9.359 2 9.241 1.952 9.144 1.856C9.048 1.759 9 1.641 9 1.5C9 1.359 9.048 1.241 9.144 1.144C9.241 1.048 9.359 1 9.5 1L11.5 1C11.641 1 11.759 1.048 11.856 1.144ZM3.955 6.172C3.786 6.287 3.663 6.439 3.587 6.629L2.336 9.757C2.303 9.838 2.274 9.919 2.246 10L12.754 10C12.726 9.919 12.697 9.838 12.664 9.757L11.413 6.629C11.337 6.439 11.214 6.287 11.045 6.172C10.876 6.057 10.689 6 10.484 6L10.257 6L9.993 7.582C9.97 7.718 9.903 7.827 9.791 7.907C9.678 7.987 9.554 8.016 9.418 7.993C9.279 7.97 9.17 7.903 9.091 7.792C9.012 7.682 8.984 7.557 9.007 7.418L9.243 6L4.516 6C4.311 6 4.124 6.057 3.955 6.172ZM3.497 8C3.497 7.864 3.547 7.746 3.646 7.646C4.244 7.049 4.883 6.75 5.563 6.75C6.205 6.75 6.943 7.028 7.777 7.584C8.443 8.028 8.997 8.25 9.438 8.25C9.64 8.25 9.835 8.204 10.024 8.113C10.226 8.015 10.434 7.859 10.646 7.646C10.746 7.547 10.864 7.497 11 7.497C11.136 7.497 11.254 7.547 11.354 7.646C11.451 7.744 11.5 7.862 11.5 8C11.5 8.138 11.451 8.256 11.354 8.354C10.756 8.951 10.117 9.25 9.438 9.25C8.795 9.25 8.057 8.972 7.223 8.416C6.557 7.972 6.003 7.75 5.563 7.75C5.36 7.75 5.165 7.796 4.976 7.887C4.774 7.985 4.566 8.141 4.354 8.354C4.256 8.451 4.138 8.5 4 8.5C3.862 8.5 3.744 8.451 3.646 8.354C3.547 8.254 3.497 8.136 3.497 8ZM2.293 13.707C2.488 13.902 2.724 14 3 14L12 14C12.276 14 12.512 13.902 12.707 13.707C12.902 13.512 13 13.276 13 13L13 11.5C13 11.332 12.991 11.165 12.974 11L2.026 11C2.009 11.165 2 11.332 2 11.5L2 13C2 13.276 2.098 13.512 2.293 13.707Z" />
    </svg>
  );
}
Vue
Vue: see /icons/sandbox.md
Svelte
Svelte: see /icons/sandbox.md
HTML img
HTML img: see /icons/sandbox.md
CSS
CSS: see /icons/sandbox.md
Data URL
Data URL: see /icons/sandbox.md
Sprite
Sprite: see /icons/sandbox.md
SwiftUI
SwiftUI: see /icons/sandbox.md
Compose
Compose: see /icons/sandbox.md
Android XML
Android XML: see /icons/sandbox.md
Flutter
Flutter: see /icons/sandbox.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for
sandbox, test environment
Tags
sandbox, sandpit, test, testing, playground, experiment, sand, spade, isolated, environment
Category
Development
Component name
SandboxIcon
History
  • 20 px drawn, 24 px drawn, added

More development icons

For agents

Metadata: /icons/sandbox.json · Markdown: /icons/sandbox.md · SVG: https://gentleface.com/svg/{style}/16/sandbox.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/sandbox.png