Data Bar Vertical Ascending icon

Used to represent data bar graph. The Data Bar Vertical Ascending icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and color styles in 4 sizes from 16 to 28 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

Filled

Color

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_data_bar_vertical_ascending_24_regular.svg

npm install @fluentui/react-icons

import { DataBarVerticalAscending24Regular } from "@fluentui/react-icons";

export function Example() {
  return <DataBarVerticalAscending24Regular aria-label="Data Bar Vertical Ascending" />;
}

Use the Data Bar Vertical Ascending icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { DataBarVerticalAscending24Regular, DataBarVerticalAscending24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DataBarVerticalAscending24Regular aria-label="Data Bar Vertical Ascending" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_data_bar_vertical_ascending_24_regular.svg" width="24" height="24" alt="Data Bar Vertical Ascending">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.251 3C17.0089 3 16.002 4.00695 16.002 5.24908V18.7509C16.002 19.9931 17.0089 21 18.251 21C19.4932 21 20.5001 19.9931 20.5001 18.7509V5.24908C20.5001 4.00695 19.4932 3 18.251 3ZM11.751 7C10.5089 7 9.50195 8.00695 9.50195 9.24908V18.7509C9.50195 19.9931 10.5089 21 11.751 21C12.9932 21 14.0001 19.9931 14.0001 18.7509V9.24908C14.0001 8.00695 12.9932 7 11.751 7ZM5.25104 11C4.0089 11 3.00195 12.0069 3.00195 13.2491V18.7509C3.00195 19.9931 4.0089 21 5.25104 21C6.49317 21 7.50012 19.9931 7.50012 18.7509V13.2491C7.50012 12.0069 6.49317 11 5.25104 11ZM18.251 4.5C18.6647 4.5 19.0001 4.83538 19.0001 5.24908V18.7509C19.0001 19.1646 18.6647 19.5 18.251 19.5C17.8373 19.5 17.502 19.1646 17.502 18.7509V5.24908C17.502 4.83538 17.8373 4.5 18.251 4.5ZM11.751 8.5C12.1647 8.5 12.5001 8.83537 12.5001 9.24908V18.7509C12.5001 19.1646 12.1647 19.5 11.751 19.5C11.3373 19.5 11.002 19.1646 11.002 18.7509V9.24908C11.002 8.83537 11.3373 8.5 11.751 8.5ZM5.25104 12.5C5.66474 12.5 6.00012 12.8354 6.00012 13.2491V18.7509C6.00012 19.1646 5.66474 19.5 5.25104 19.5C4.83733 19.5 4.50195 19.1646 4.50195 18.7509V13.2491C4.50195 12.8354 4.83733 12.5 5.25104 12.5Z" fill="currentColor"/></svg>

Details

Name	Data Bar Vertical Ascending
Styles	Regular (outlined), Filled, Color
Sizes	16 px, 20 px, 24 px, 28 px
Regular (outlined) file	`ic_fluent_data_bar_vertical_ascending_24_regular.svg`
Filled file	`ic_fluent_data_bar_vertical_ascending_24_filled.svg`
Color file	`ic_fluent_data_bar_vertical_ascending_24_color.svg`
React (Regular)	`DataBarVerticalAscending16Regular, DataBarVerticalAscending20Regular, DataBarVerticalAscending24Regular, DataBarVerticalAscending28Regular`
React (Filled)	`DataBarVerticalAscending16Filled, DataBarVerticalAscending20Filled, DataBarVerticalAscending24Filled, DataBarVerticalAscending28Filled`
React (Color)	`DataBarVerticalAscending16Color, DataBarVerticalAscending20Color, DataBarVerticalAscending24Color`
License	MIT (© Microsoft Corporation)

Keywords

data vertical ascending

Data Bar Vertical Ascending icon

Every size and style