square chevron down icon

square-chevron-down-fill from Keyline Icons by Keyline Icons · Fill · MIT Free for personal and commercial use.

Name
square-chevron-down-fill
Set
Keyline Icons
Style
Fill
Viewbox
24×24
License
MIT

7 other variants in Keyline Icons

square-chevron-downsquare-chevron-down-duotonesquare-chevron-down-sharpsquare-chevron-down-sharp-duotonesquare-chevron-down-sharp-fillsquare-chevron-down-sharp-two-tonesquare-chevron-down-two-tone

The same icon in other sets

square-chevron-downHuge Iconssquare-chevron-downLucidesquare-chevron-downPixelarticonssquare-chevron-downTabler Icons

Related icons in Keyline Icons

square-activitysquare-alertsquare-align-offset-bottomsquare-align-offset-leftsquare-align-offset-rightsquare-align-offset-topsquare-arrow-downsquare-arrow-down-leftsquare-arrow-down-rightsquare-arrow-leftsquare-arrow-rightsquare-arrow-u-turn-leftsquare-arrow-u-turn-rightsquare-arrow-upsquare-arrow-up-leftsquare-arrow-up-rightsquare-bar-chartsquare-bar-chart-2square-bar-chart-2-downsquare-bar-chart-2-horizontal-endsquare-bar-chart-2-horizontal-startsquare-bar-chart-downsquare-bar-chart-horizontal-endsquare-bar-chart-horizontal-start

Use the square chevron down icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 2 C20.2091 2 22 3.7909 22 6 L22 18 C22 20.2091 20.2091 22 18 22 L6 22 C3.7909 22 2 20.2091 2 18 L2 6 C2 3.7909 3.7909 2 6 2 L18 2 ZM7.2929 10.7071L11.2929 14.7071C11.6834 15.0976 12.3166 15.0976 12.7071 14.7071L16.7071 10.7071C16.8946 10.5196 17 10.2652 17 10C17 9.7348 16.8946 9.4804 16.7071 9.2929C16.3166 8.9024 15.6834 8.9024 15.2929 9.2929L12 12.5858L8.7071 9.2929C8.3166 8.9024 7.6834 8.9024 7.2929 9.2929C6.9024 9.6834 6.9024 10.3166 7.2929 10.7071Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsSquareChevronDownFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 2 C20.2091 2 22 3.7909 22 6 L22 18 C22 20.2091 20.2091 22 18 22 L6 22 C3.7909 22 2 20.2091 2 18 L2 6 C2 3.7909 3.7909 2 6 2 L18 2 ZM7.2929 10.7071L11.2929 14.7071C11.6834 15.0976 12.3166 15.0976 12.7071 14.7071L16.7071 10.7071C16.8946 10.5196 17 10.2652 17 10C17 9.7348 16.8946 9.4804 16.7071 9.2929C16.3166 8.9024 15.6834 8.9024 15.2929 9.2929L12 12.5858L8.7071 9.2929C8.3166 8.9024 7.6834 8.9024 7.2929 9.2929C6.9024 9.6834 6.9024 10.3166 7.2929 10.7071Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 2 C20.2091 2 22 3.7909 22 6 L22 18 C22 20.2091 20.2091 22 18 22 L6 22 C3.7909 22 2 20.2091 2 18 L2 6 C2 3.7909 3.7909 2 6 2 L18 2 ZM7.2929 10.7071L11.2929 14.7071C11.6834 15.0976 12.3166 15.0976 12.7071 14.7071L16.7071 10.7071C16.8946 10.5196 17 10.2652 17 10C17 9.7348 16.8946 9.4804 16.7071 9.2929C16.3166 8.9024 15.6834 8.9024 15.2929 9.2929L12 12.5858L8.7071 9.2929C8.3166 8.9024 7.6834 8.9024 7.2929 9.2929C6.9024 9.6834 6.9024 10.3166 7.2929 10.7071Z"/></svg>
</template>

CSS

.icon-square-chevron-down-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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18%202%20C20.2091%202%2022%203.7909%2022%206%20L22%2018%20C22%2020.2091%2020.2091%2022%2018%2022%20L6%2022%20C3.7909%2022%202%2020.2091%202%2018%20L2%206%20C2%203.7909%203.7909%202%206%202%20L18%202%20ZM7.2929%2010.7071L11.2929%2014.7071C11.6834%2015.0976%2012.3166%2015.0976%2012.7071%2014.7071L16.7071%2010.7071C16.8946%2010.5196%2017%2010.2652%2017%2010C17%209.7348%2016.8946%209.4804%2016.7071%209.2929C16.3166%208.9024%2015.6834%208.9024%2015.2929%209.2929L12%2012.5858L8.7071%209.2929C8.3166%208.9024%207.6834%208.9024%207.2929%209.2929C6.9024%209.6834%206.9024%2010.3166%207.2929%2010.7071Z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18%202%20C20.2091%202%2022%203.7909%2022%206%20L22%2018%20C22%2020.2091%2020.2091%2022%2018%2022%20L6%2022%20C3.7909%2022%202%2020.2091%202%2018%20L2%206%20C2%203.7909%203.7909%202%206%202%20L18%202%20ZM7.2929%2010.7071L11.2929%2014.7071C11.6834%2015.0976%2012.3166%2015.0976%2012.7071%2014.7071L16.7071%2010.7071C16.8946%2010.5196%2017%2010.2652%2017%2010C17%209.7348%2016.8946%209.4804%2016.7071%209.2929C16.3166%208.9024%2015.6834%208.9024%2015.2929%209.2929L12%2012.5858L8.7071%209.2929C8.3166%208.9024%207.6834%208.9024%207.2929%209.2929C6.9024%209.6834%206.9024%2010.3166%207.2929%2010.7071Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/square-chevron-down-fill.svg?color=%231a73e8&size=48