chart bar icon
chart-bar from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- chart-bar
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
The same icon in other sets
Related icons in Framework7 Icons
Use the chart bar icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M44.849 49.456h5.95c3.438 0 5.201-1.653 5.201-4.914V13.07c0-3.262-1.763-4.937-5.2-4.937h-5.951c-3.438 0-5.201 1.675-5.201 4.937v31.47c0 3.263 1.762 4.915 5.2 4.915m.595-3.328c-1.697 0-2.292-.572-2.292-2.225V13.71c0-1.675.595-2.248 2.292-2.248h4.782c1.675 0 2.27.573 2.27 2.248v30.193c0 1.653-.595 2.226-2.27 2.226Zm-20.43 3.328h5.95c3.438 0 5.224-1.653 5.224-4.914V19.506c0-3.262-1.786-4.937-5.224-4.937h-5.95c-3.438 0-5.18 1.675-5.18 4.937v25.036c0 3.261 1.742 4.914 5.18 4.914m.595-3.328c-1.675 0-2.27-.572-2.27-2.225V20.145c0-1.675.595-2.248 2.27-2.248h4.782c1.697 0 2.292.573 2.292 2.248v23.758c0 1.653-.595 2.226-2.292 2.226ZM5.2 49.457h5.95c3.439 0 5.202-1.653 5.202-4.914V25.919c0-3.262-1.763-4.937-5.202-4.937H5.2c-3.437 0-5.2 1.675-5.2 4.938v18.623c0 3.261 1.763 4.914 5.201 4.914m.595-3.328c-1.697 0-2.292-.572-2.292-2.225V26.558c0-1.675.595-2.248 2.292-2.248h4.783c1.675 0 2.27.573 2.27 2.248v17.345c0 1.653-.595 2.226-2.27 2.226Z"/></svg>
React
import type { SVGProps } from "react";
export function F7ChartBar(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M44.849 49.456h5.95c3.438 0 5.201-1.653 5.201-4.914V13.07c0-3.262-1.763-4.937-5.2-4.937h-5.951c-3.438 0-5.201 1.675-5.201 4.937v31.47c0 3.263 1.762 4.915 5.2 4.915m.595-3.328c-1.697 0-2.292-.572-2.292-2.225V13.71c0-1.675.595-2.248 2.292-2.248h4.782c1.675 0 2.27.573 2.27 2.248v30.193c0 1.653-.595 2.226-2.27 2.226Zm-20.43 3.328h5.95c3.438 0 5.224-1.653 5.224-4.914V19.506c0-3.262-1.786-4.937-5.224-4.937h-5.95c-3.438 0-5.18 1.675-5.18 4.937v25.036c0 3.261 1.742 4.914 5.18 4.914m.595-3.328c-1.675 0-2.27-.572-2.27-2.225V20.145c0-1.675.595-2.248 2.27-2.248h4.782c1.697 0 2.292.573 2.292 2.248v23.758c0 1.653-.595 2.226-2.292 2.226ZM5.2 49.457h5.95c3.439 0 5.202-1.653 5.202-4.914V25.919c0-3.262-1.763-4.937-5.202-4.937H5.2c-3.437 0-5.2 1.675-5.2 4.938v18.623c0 3.261 1.763 4.914 5.201 4.914m.595-3.328c-1.697 0-2.292-.572-2.292-2.225V26.558c0-1.675.595-2.248 2.292-2.248h4.783c1.675 0 2.27.573 2.27 2.248v17.345c0 1.653-.595 2.226-2.27 2.226Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M44.849 49.456h5.95c3.438 0 5.201-1.653 5.201-4.914V13.07c0-3.262-1.763-4.937-5.2-4.937h-5.951c-3.438 0-5.201 1.675-5.201 4.937v31.47c0 3.263 1.762 4.915 5.2 4.915m.595-3.328c-1.697 0-2.292-.572-2.292-2.225V13.71c0-1.675.595-2.248 2.292-2.248h4.782c1.675 0 2.27.573 2.27 2.248v30.193c0 1.653-.595 2.226-2.27 2.226Zm-20.43 3.328h5.95c3.438 0 5.224-1.653 5.224-4.914V19.506c0-3.262-1.786-4.937-5.224-4.937h-5.95c-3.438 0-5.18 1.675-5.18 4.937v25.036c0 3.261 1.742 4.914 5.18 4.914m.595-3.328c-1.675 0-2.27-.572-2.27-2.225V20.145c0-1.675.595-2.248 2.27-2.248h4.782c1.697 0 2.292.573 2.292 2.248v23.758c0 1.653-.595 2.226-2.292 2.226ZM5.2 49.457h5.95c3.439 0 5.202-1.653 5.202-4.914V25.919c0-3.262-1.763-4.937-5.202-4.937H5.2c-3.437 0-5.2 1.675-5.2 4.938v18.623c0 3.261 1.763 4.914 5.201 4.914m.595-3.328c-1.697 0-2.292-.572-2.292-2.225V26.558c0-1.675.595-2.248 2.292-2.248h4.783c1.675 0 2.27.573 2.27 2.248v17.345c0 1.653-.595 2.226-2.27 2.226Z"/></svg> </template>
CSS
.icon-chart-bar {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M44.849%2049.456h5.95c3.438%200%205.201-1.653%205.201-4.914V13.07c0-3.262-1.763-4.937-5.2-4.937h-5.951c-3.438%200-5.201%201.675-5.201%204.937v31.47c0%203.263%201.762%204.915%205.2%204.915m.595-3.328c-1.697%200-2.292-.572-2.292-2.225V13.71c0-1.675.595-2.248%202.292-2.248h4.782c1.675%200%202.27.573%202.27%202.248v30.193c0%201.653-.595%202.226-2.27%202.226Zm-20.43%203.328h5.95c3.438%200%205.224-1.653%205.224-4.914V19.506c0-3.262-1.786-4.937-5.224-4.937h-5.95c-3.438%200-5.18%201.675-5.18%204.937v25.036c0%203.261%201.742%204.914%205.18%204.914m.595-3.328c-1.675%200-2.27-.572-2.27-2.225V20.145c0-1.675.595-2.248%202.27-2.248h4.782c1.697%200%202.292.573%202.292%202.248v23.758c0%201.653-.595%202.226-2.292%202.226ZM5.2%2049.457h5.95c3.439%200%205.202-1.653%205.202-4.914V25.919c0-3.262-1.763-4.937-5.202-4.937H5.2c-3.437%200-5.2%201.675-5.2%204.938v18.623c0%203.261%201.763%204.914%205.201%204.914m.595-3.328c-1.697%200-2.292-.572-2.292-2.225V26.558c0-1.675.595-2.248%202.292-2.248h4.783c1.675%200%202.27.573%202.27%202.248v17.345c0%201.653-.595%202.226-2.27%202.226Z%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M44.849%2049.456h5.95c3.438%200%205.201-1.653%205.201-4.914V13.07c0-3.262-1.763-4.937-5.2-4.937h-5.951c-3.438%200-5.201%201.675-5.201%204.937v31.47c0%203.263%201.762%204.915%205.2%204.915m.595-3.328c-1.697%200-2.292-.572-2.292-2.225V13.71c0-1.675.595-2.248%202.292-2.248h4.782c1.675%200%202.27.573%202.27%202.248v30.193c0%201.653-.595%202.226-2.27%202.226Zm-20.43%203.328h5.95c3.438%200%205.224-1.653%205.224-4.914V19.506c0-3.262-1.786-4.937-5.224-4.937h-5.95c-3.438%200-5.18%201.675-5.18%204.937v25.036c0%203.261%201.742%204.914%205.18%204.914m.595-3.328c-1.675%200-2.27-.572-2.27-2.225V20.145c0-1.675.595-2.248%202.27-2.248h4.782c1.697%200%202.292.573%202.292%202.248v23.758c0%201.653-.595%202.226-2.292%202.226ZM5.2%2049.457h5.95c3.439%200%205.202-1.653%205.202-4.914V25.919c0-3.262-1.763-4.937-5.202-4.937H5.2c-3.437%200-5.2%201.675-5.2%204.938v18.623c0%203.261%201.763%204.914%205.201%204.914m.595-3.328c-1.697%200-2.292-.572-2.292-2.225V26.558c0-1.675.595-2.248%202.292-2.248h4.783c1.675%200%202.27.573%202.27%202.248v17.345c0%201.653-.595%202.226-2.27%202.226Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/chart-bar.svg?color=%231a73e8&size=48
