section icon

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

Name: section
Set: Font Awesome Solid
Style: Solid
Viewbox: 640×640
License: CC BY 4.0

The same icon in other sets

sectionFont Awesome 6 Solid sectionHuge Icons sectionSVG Logos sectionLucide section-fillMingCute Icon sectionPixelarticons sectionRadix Icons sectionTabler Icons

Use the section icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M302 64c-60.8 0-110 49.2-110 110c0 23.7 7.6 45.8 20.5 64c-12.9 18-20.5 40.1-20.5 64c0 53.7 38.9 99.6 91.9 108.4l61.7 10.3c22.2 3.7 38.4 22.9 38.4 45.3c0 25.4-20.6 46-46 46h-98c-17.7 0-32 14.3-32 32s14.3 32 32 32h98c60.7 0 110-49.2 110-110c0-23.7-7.6-45.9-20.5-64c12.9-18 20.5-40.1 20.5-64c0-53.8-38.9-99.6-91.9-108.5l-61.7-10.3c-22.2-3.6-38.4-22.8-38.4-45.2c0-25.4 20.6-46 46-46h98c17.7 0 32-14.3 32-32s-14.3-32-32-32zm74.7 299.1c-6.5-2.4-13.4-4.3-20.5-5.5l-61.7-10.3c-22.2-3.7-38.4-22.9-38.4-45.3c0-9.2 2.7-17.8 7.4-25c6.5 2.4 13.4 4.3 20.5 5.5l61.7 10.3c22.2 3.7 38.4 22.9 38.4 45.3c0 9.2-2.7 17.8-7.4 25"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidSection(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="M302 64c-60.8 0-110 49.2-110 110c0 23.7 7.6 45.8 20.5 64c-12.9 18-20.5 40.1-20.5 64c0 53.7 38.9 99.6 91.9 108.4l61.7 10.3c22.2 3.7 38.4 22.9 38.4 45.3c0 25.4-20.6 46-46 46h-98c-17.7 0-32 14.3-32 32s14.3 32 32 32h98c60.7 0 110-49.2 110-110c0-23.7-7.6-45.9-20.5-64c12.9-18 20.5-40.1 20.5-64c0-53.8-38.9-99.6-91.9-108.5l-61.7-10.3c-22.2-3.6-38.4-22.8-38.4-45.2c0-25.4 20.6-46 46-46h98c17.7 0 32-14.3 32-32s-14.3-32-32-32zm74.7 299.1c-6.5-2.4-13.4-4.3-20.5-5.5l-61.7-10.3c-22.2-3.7-38.4-22.9-38.4-45.3c0-9.2 2.7-17.8 7.4-25c6.5 2.4 13.4 4.3 20.5 5.5l61.7 10.3c22.2 3.7 38.4 22.9 38.4 45.3c0 9.2-2.7 17.8-7.4 25"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M302 64c-60.8 0-110 49.2-110 110c0 23.7 7.6 45.8 20.5 64c-12.9 18-20.5 40.1-20.5 64c0 53.7 38.9 99.6 91.9 108.4l61.7 10.3c22.2 3.7 38.4 22.9 38.4 45.3c0 25.4-20.6 46-46 46h-98c-17.7 0-32 14.3-32 32s14.3 32 32 32h98c60.7 0 110-49.2 110-110c0-23.7-7.6-45.9-20.5-64c12.9-18 20.5-40.1 20.5-64c0-53.8-38.9-99.6-91.9-108.5l-61.7-10.3c-22.2-3.6-38.4-22.8-38.4-45.2c0-25.4 20.6-46 46-46h98c17.7 0 32-14.3 32-32s-14.3-32-32-32zm74.7 299.1c-6.5-2.4-13.4-4.3-20.5-5.5l-61.7-10.3c-22.2-3.7-38.4-22.9-38.4-45.3c0-9.2 2.7-17.8 7.4-25c6.5 2.4 13.4 4.3 20.5 5.5l61.7 10.3c22.2 3.7 38.4 22.9 38.4 45.3c0 9.2-2.7 17.8-7.4 25"/></svg>
</template>

CSS

.icon-section {
  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%22M302%2064c-60.8%200-110%2049.2-110%20110c0%2023.7%207.6%2045.8%2020.5%2064c-12.9%2018-20.5%2040.1-20.5%2064c0%2053.7%2038.9%2099.6%2091.9%20108.4l61.7%2010.3c22.2%203.7%2038.4%2022.9%2038.4%2045.3c0%2025.4-20.6%2046-46%2046h-98c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h98c60.7%200%20110-49.2%20110-110c0-23.7-7.6-45.9-20.5-64c12.9-18%2020.5-40.1%2020.5-64c0-53.8-38.9-99.6-91.9-108.5l-61.7-10.3c-22.2-3.6-38.4-22.8-38.4-45.2c0-25.4%2020.6-46%2046-46h98c17.7%200%2032-14.3%2032-32s-14.3-32-32-32zm74.7%20299.1c-6.5-2.4-13.4-4.3-20.5-5.5l-61.7-10.3c-22.2-3.7-38.4-22.9-38.4-45.3c0-9.2%202.7-17.8%207.4-25c6.5%202.4%2013.4%204.3%2020.5%205.5l61.7%2010.3c22.2%203.7%2038.4%2022.9%2038.4%2045.3c0%209.2-2.7%2017.8-7.4%2025%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%22M302%2064c-60.8%200-110%2049.2-110%20110c0%2023.7%207.6%2045.8%2020.5%2064c-12.9%2018-20.5%2040.1-20.5%2064c0%2053.7%2038.9%2099.6%2091.9%20108.4l61.7%2010.3c22.2%203.7%2038.4%2022.9%2038.4%2045.3c0%2025.4-20.6%2046-46%2046h-98c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h98c60.7%200%20110-49.2%20110-110c0-23.7-7.6-45.9-20.5-64c12.9-18%2020.5-40.1%2020.5-64c0-53.8-38.9-99.6-91.9-108.5l-61.7-10.3c-22.2-3.6-38.4-22.8-38.4-45.2c0-25.4%2020.6-46%2046-46h98c17.7%200%2032-14.3%2032-32s-14.3-32-32-32zm74.7%20299.1c-6.5-2.4-13.4-4.3-20.5-5.5l-61.7-10.3c-22.2-3.7-38.4-22.9-38.4-45.3c0-9.2%202.7-17.8%207.4-25c6.5%202.4%2013.4%204.3%2020.5%205.5l61.7%2010.3c22.2%203.7%2038.4%2022.9%2038.4%2045.3c0%209.2-2.7%2017.8-7.4%2025%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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