chart line down icon

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

Name
chart-line-down-fill
Set
Keyline Icons
Style
Fill
Viewbox
24×24
License
MIT

7 other variants in Keyline Icons

chart-line-downchart-line-down-duotonechart-line-down-sharpchart-line-down-sharp-duotonechart-line-down-sharp-fillchart-line-down-sharp-two-tonechart-line-down-two-tone

The same icon in other sets

chart-line-down-outlineFlowbite Iconschart-line-downPhosphor

Related icons in Keyline Icons

chart-areachart-barchart-bar-bigchart-bar-stackedchart-candlestickchart-columnchart-column-bigchart-column-stackedchart-diagramchart-ganttchart-linechart-line-decreasingchart-line-increasingchart-line-upchart-networkchart-no-axes-combinedchart-piechart-pyramidchart-scatterchart-scatter-3dchart-scatter-bubblechart-splinechart-tree-mapchart-waterfall

Use the chart line down icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3L3 19C3 20.1046 3.8954 21 5 21L21 21M7 8L10.3887 11.8123C10.7342 12.201 11.32 12.26 11.7361 11.9479L14.3361 9.998C14.721 9.7092 15.2571 9.7356 15.6118 10.0608L20.2628 14.3243M16.5 15L20.5 15C20.7761 15 21 14.7761 21 14.5L21 10.5"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsChartLineDownFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3L3 19C3 20.1046 3.8954 21 5 21L21 21M7 8L10.3887 11.8123C10.7342 12.201 11.32 12.26 11.7361 11.9479L14.3361 9.998C14.721 9.7092 15.2571 9.7356 15.6118 10.0608L20.2628 14.3243M16.5 15L20.5 15C20.7761 15 21 14.7761 21 14.5L21 10.5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3L3 19C3 20.1046 3.8954 21 5 21L21 21M7 8L10.3887 11.8123C10.7342 12.201 11.32 12.26 11.7361 11.9479L14.3361 9.998C14.721 9.7092 15.2571 9.7356 15.6118 10.0608L20.2628 14.3243M16.5 15L20.5 15C20.7761 15 21 14.7761 21 14.5L21 10.5"/></svg>
</template>

CSS

.icon-chart-line-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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M3%203L3%2019C3%2020.1046%203.8954%2021%205%2021L21%2021M7%208L10.3887%2011.8123C10.7342%2012.201%2011.32%2012.26%2011.7361%2011.9479L14.3361%209.998C14.721%209.7092%2015.2571%209.7356%2015.6118%2010.0608L20.2628%2014.3243M16.5%2015L20.5%2015C20.7761%2015%2021%2014.7761%2021%2014.5L21%2010.5%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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M3%203L3%2019C3%2020.1046%203.8954%2021%205%2021L21%2021M7%208L10.3887%2011.8123C10.7342%2012.201%2011.32%2012.26%2011.7361%2011.9479L14.3361%209.998C14.721%209.7092%2015.2571%209.7356%2015.6118%2010.0608L20.2628%2014.3243M16.5%2015L20.5%2015C20.7761%2015%2021%2014.7761%2021%2014.5L21%2010.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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