fill icon

fill from Font Awesome Solid by Dave Gandy · Solid · Design · CC-BY-4.0 Attribution required.

Name: fill
Set: Font Awesome Solid
Style: Solid
Category: Design
Viewbox: 640×640
License: CC BY 4.0

The same icon in other sets

fillFont Awesome 6 Solid fillIconPark fillIconPark Outline fillIconPark Solid fillIconPark TwoTone fillLine Awesome fillMaterial Design Icons fillPixelarticons

More design icons from Font Awesome Solid

adjust bezier-curve clone crop crop-alt crosshairs draw-polygon eye eye-dropper eye-slash fill-drip layer-group magic object-group object-ungroup paint-brush palette splotch spray-can stamp swatchbook tint tint-slash

Use the fill icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M360 128c6.9 0 13.5 2.7 18.3 7.6l126.1 126.1c4.9 4.9 7.6 11.5 7.6 18.3s-2.7 13.5-7.6 18.3L450.7 352H129.3c1.3-3.9 3.4-7.4 6.3-10.3l96.4-96.4l33.4 33.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L277.3 200l64.4-64.4c4.9-4.9 11.5-7.6 18.3-7.6m-173.3 72l-96.4 96.4C73.5 313.3 64 336.1 64 360s9.5 46.7 26.3 63.6l126.1 126.1c16.9 16.8 39.7 26.3 63.6 26.3s46.7-9.5 63.6-26.3l206.1-206.1c16.8-16.9 26.3-39.7 26.3-63.6s-9.5-46.7-26.3-63.6L423.6 90.3C406.7 73.5 383.9 64 360 64s-46.7 9.5-63.6 26.3L232 154.7l-49.4-49.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M360 128c6.9 0 13.5 2.7 18.3 7.6l126.1 126.1c4.9 4.9 7.6 11.5 7.6 18.3s-2.7 13.5-7.6 18.3L450.7 352H129.3c1.3-3.9 3.4-7.4 6.3-10.3l96.4-96.4l33.4 33.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L277.3 200l64.4-64.4c4.9-4.9 11.5-7.6 18.3-7.6m-173.3 72l-96.4 96.4C73.5 313.3 64 336.1 64 360s9.5 46.7 26.3 63.6l126.1 126.1c16.9 16.8 39.7 26.3 63.6 26.3s46.7-9.5 63.6-26.3l206.1-206.1c16.8-16.9 26.3-39.7 26.3-63.6s-9.5-46.7-26.3-63.6L423.6 90.3C406.7 73.5 383.9 64 360 64s-46.7 9.5-63.6 26.3L232 154.7l-49.4-49.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M360 128c6.9 0 13.5 2.7 18.3 7.6l126.1 126.1c4.9 4.9 7.6 11.5 7.6 18.3s-2.7 13.5-7.6 18.3L450.7 352H129.3c1.3-3.9 3.4-7.4 6.3-10.3l96.4-96.4l33.4 33.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L277.3 200l64.4-64.4c4.9-4.9 11.5-7.6 18.3-7.6m-173.3 72l-96.4 96.4C73.5 313.3 64 336.1 64 360s9.5 46.7 26.3 63.6l126.1 126.1c16.9 16.8 39.7 26.3 63.6 26.3s46.7-9.5 63.6-26.3l206.1-206.1c16.8-16.9 26.3-39.7 26.3-63.6s-9.5-46.7-26.3-63.6L423.6 90.3C406.7 73.5 383.9 64 360 64s-46.7 9.5-63.6 26.3L232 154.7l-49.4-49.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3z"/></svg>
</template>

CSS

.icon-fill {
  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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M360%20128c6.9%200%2013.5%202.7%2018.3%207.6l126.1%20126.1c4.9%204.9%207.6%2011.5%207.6%2018.3s-2.7%2013.5-7.6%2018.3L450.7%20352H129.3c1.3-3.9%203.4-7.4%206.3-10.3l96.4-96.4l33.4%2033.4c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L277.3%20200l64.4-64.4c4.9-4.9%2011.5-7.6%2018.3-7.6m-173.3%2072l-96.4%2096.4C73.5%20313.3%2064%20336.1%2064%20360s9.5%2046.7%2026.3%2063.6l126.1%20126.1c16.9%2016.8%2039.7%2026.3%2063.6%2026.3s46.7-9.5%2063.6-26.3l206.1-206.1c16.8-16.9%2026.3-39.7%2026.3-63.6s-9.5-46.7-26.3-63.6L423.6%2090.3C406.7%2073.5%20383.9%2064%20360%2064s-46.7%209.5-63.6%2026.3L232%20154.7l-49.4-49.3c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M360%20128c6.9%200%2013.5%202.7%2018.3%207.6l126.1%20126.1c4.9%204.9%207.6%2011.5%207.6%2018.3s-2.7%2013.5-7.6%2018.3L450.7%20352H129.3c1.3-3.9%203.4-7.4%206.3-10.3l96.4-96.4l33.4%2033.4c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L277.3%20200l64.4-64.4c4.9-4.9%2011.5-7.6%2018.3-7.6m-173.3%2072l-96.4%2096.4C73.5%20313.3%2064%20336.1%2064%20360s9.5%2046.7%2026.3%2063.6l126.1%20126.1c16.9%2016.8%2039.7%2026.3%2063.6%2026.3s46.7-9.5%2063.6-26.3l206.1-206.1c16.8-16.9%2026.3-39.7%2026.3-63.6s-9.5-46.7-26.3-63.6L423.6%2090.3C406.7%2073.5%20383.9%2064%20360%2064s-46.7%209.5-63.6%2026.3L232%20154.7l-49.4-49.3c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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