data bar vertical ascending icon
data-bar-vertical-ascending-16 from Fluent UI System Color Icons by Microsoft Corporation · 16 · MIT Free for personal and commercial use.
- Name
- data-bar-vertical-ascending-16
- Set
- Fluent UI System Color Icons
- Style
- 16
- Viewbox
- 16×16
- License
- MIT
2 other variants in Fluent UI System Color Icons
The same icon in other sets
Related icons in Fluent UI System Color Icons
Use the data bar vertical ascending icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVG1RCvjdAb)" d="M14 3.683C14 2.753 13.328 2 12.5 2S11 2.754 11 3.683v8.634c0 .93.672 1.683 1.5 1.683s1.5-.754 1.5-1.683z"/><path fill="url(#SVGfPbywdnX)" d="M10.003 6.5a1.5 1.5 0 0 0-3 0v6a1.5 1.5 0 0 0 3 0z"/><path fill="url(#SVGXrOcKbvb)" d="M6 9.497a1.5 1.5 0 1 0-3 0v3a1.5 1.5 0 0 0 3 0z"/><defs><linearGradient id="SVG1RCvjdAb" x1="13.605" x2="21.663" y1="-1.686" y2="2.075" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGfPbywdnX" x1="7.292" x2="14.437" y1="2.802" y2="7.168" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGXrOcKbvb" x1="2.813" x2="8.145" y1="4.622" y2="9.509" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorDataBarVerticalAscending16(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVG1RCvjdAb)" d="M14 3.683C14 2.753 13.328 2 12.5 2S11 2.754 11 3.683v8.634c0 .93.672 1.683 1.5 1.683s1.5-.754 1.5-1.683z"/><path fill="url(#SVGfPbywdnX)" d="M10.003 6.5a1.5 1.5 0 0 0-3 0v6a1.5 1.5 0 0 0 3 0z"/><path fill="url(#SVGXrOcKbvb)" d="M6 9.497a1.5 1.5 0 1 0-3 0v3a1.5 1.5 0 0 0 3 0z"/><defs><linearGradient id="SVG1RCvjdAb" x1="13.605" x2="21.663" y1="-1.686" y2="2.075" gradientUnits="userSpaceOnUse"><stop stopColor="#16bbda"/><stop offset="1" stopColor="#0067bf"/></linearGradient><linearGradient id="SVGfPbywdnX" x1="7.292" x2="14.437" y1="2.802" y2="7.168" gradientUnits="userSpaceOnUse"><stop stopColor="#16bbda"/><stop offset="1" stopColor="#0067bf"/></linearGradient><linearGradient id="SVGXrOcKbvb" x1="2.813" x2="8.145" y1="4.622" y2="9.509" gradientUnits="userSpaceOnUse"><stop stopColor="#16bbda"/><stop offset="1" stopColor="#0067bf"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVG1RCvjdAb)" d="M14 3.683C14 2.753 13.328 2 12.5 2S11 2.754 11 3.683v8.634c0 .93.672 1.683 1.5 1.683s1.5-.754 1.5-1.683z"/><path fill="url(#SVGfPbywdnX)" d="M10.003 6.5a1.5 1.5 0 0 0-3 0v6a1.5 1.5 0 0 0 3 0z"/><path fill="url(#SVGXrOcKbvb)" d="M6 9.497a1.5 1.5 0 1 0-3 0v3a1.5 1.5 0 0 0 3 0z"/><defs><linearGradient id="SVG1RCvjdAb" x1="13.605" x2="21.663" y1="-1.686" y2="2.075" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGfPbywdnX" x1="7.292" x2="14.437" y1="2.802" y2="7.168" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGXrOcKbvb" x1="2.813" x2="8.145" y1="4.622" y2="9.509" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg> </template>
CSS
.icon-data-bar-vertical-ascending-16 {
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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVG1RCvjdAb)%22%20d%3D%22M14%203.683C14%202.753%2013.328%202%2012.5%202S11%202.754%2011%203.683v8.634c0%20.93.672%201.683%201.5%201.683s1.5-.754%201.5-1.683z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGfPbywdnX)%22%20d%3D%22M10.003%206.5a1.5%201.5%200%200%200-3%200v6a1.5%201.5%200%200%200%203%200z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGXrOcKbvb)%22%20d%3D%22M6%209.497a1.5%201.5%200%201%200-3%200v3a1.5%201.5%200%200%200%203%200z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG1RCvjdAb%22%20x1%3D%2213.605%22%20x2%3D%2221.663%22%20y1%3D%22-1.686%22%20y2%3D%222.075%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGfPbywdnX%22%20x1%3D%227.292%22%20x2%3D%2214.437%22%20y1%3D%222.802%22%20y2%3D%227.168%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGXrOcKbvb%22%20x1%3D%222.813%22%20x2%3D%228.145%22%20y1%3D%224.622%22%20y2%3D%229.509%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVG1RCvjdAb)%22%20d%3D%22M14%203.683C14%202.753%2013.328%202%2012.5%202S11%202.754%2011%203.683v8.634c0%20.93.672%201.683%201.5%201.683s1.5-.754%201.5-1.683z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGfPbywdnX)%22%20d%3D%22M10.003%206.5a1.5%201.5%200%200%200-3%200v6a1.5%201.5%200%200%200%203%200z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGXrOcKbvb)%22%20d%3D%22M6%209.497a1.5%201.5%200%201%200-3%200v3a1.5%201.5%200%200%200%203%200z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG1RCvjdAb%22%20x1%3D%2213.605%22%20x2%3D%2221.663%22%20y1%3D%22-1.686%22%20y2%3D%222.075%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGfPbywdnX%22%20x1%3D%227.292%22%20x2%3D%2214.437%22%20y1%3D%222.802%22%20y2%3D%227.168%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGXrOcKbvb%22%20x1%3D%222.813%22%20x2%3D%228.145%22%20y1%3D%224.622%22%20y2%3D%229.509%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/data-bar-vertical-ascending-16.svg?color=%231a73e8&size=48
