Fill

Atomic Props	CSS Properties
fillNone	fill: none
fillCurrent	fill: currentColor

Fill none

Result

Loading...

Live Editor

<Box gap3> <Box as="svg" fillNone red500 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> </Box> <Box as="svg" fillNone teal500 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> </Box> </Box>

<Box gap3>
  <Box as="svg" fillNone red500 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
    />
  </Box>
  <Box as="svg" fillNone teal500 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
    />
  </Box>
</Box>

Fill current

Result

Loading...

Live Editor

<Box gap3> <Box as="svg" fillCurrent red500 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> </Box> <Box as="svg" fillCurrent teal500 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> </Box> </Box>

<Box gap3>
  <Box as="svg" fillCurrent red500 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
    />
  </Box>
  <Box as="svg" fillCurrent teal500 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
    />
  </Box>
</Box>

Fill with color

Result

Loading...

Live Editor

<Box gap3> <Box as="svg" fillOrange400 stroke-0 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> </Box> <Box as="svg" fillPink500 stroke-0 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> </Box> </Box>

<Box gap3>
  <Box
    as="svg"
    fillOrange400
    stroke-0
    square10
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
    />
  </Box>
  <Box
    as="svg"
    fillPink500
    stroke-0
    square10
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
    />
  </Box>
</Box>