Data Usage Edit icon

Use the Data Usage Edit 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 { DataUsageEdit24Regular, DataUsageEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DataUsageEdit24Regular aria-label="Data Usage Edit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_data_usage_edit_24_regular.svg" width="24" height="24" alt="Data Usage Edit">

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="M20 4.74609C20 3.22731 18.7688 1.99609 17.25 1.99609H4.75C3.23122 1.99609 2 3.22731 2 4.74609V17.2461C2 18.7649 3.23122 19.9961 4.75 19.9961H11.416L11.5209 19.5763C11.617 19.1921 11.7739 18.8276 11.9842 18.4961H4.75C4.05964 18.4961 3.5 17.9364 3.5 17.2461V4.74609C3.5 4.05574 4.05964 3.49609 4.75 3.49609H17.25C17.9404 3.49609 18.5 4.05574 18.5 4.74609V11.8592C18.9371 11.4593 19.4562 11.1989 20 11.078V4.74609ZM16 14.3545V6.72881L15.9932 6.62983C15.9435 6.27381 15.6297 5.9994 15.25 5.9994C14.8358 5.9994 14.5 6.32597 14.5 6.72881V15.27L14.5068 15.369C14.5243 15.4942 14.5744 15.6093 14.6486 15.7059L16 14.3545ZM7.49315 8.64485C7.44349 8.28034 7.1297 7.9994 6.75 7.9994C6.33579 7.9994 6 8.33374 6 8.74618V15.2526L6.00685 15.354C6.05651 15.7185 6.3703 15.9994 6.75 15.9994C7.16421 15.9994 7.5 15.6651 7.5 15.2526V8.74618L7.49315 8.64485ZM11.707 11.6168C11.6549 11.2628 11.3458 10.9925 10.9751 10.9961C10.5707 11.0001 10.246 11.3285 10.25 11.7296L10.2854 15.277L10.293 15.3755C10.3451 15.7295 10.6542 15.9997 11.0249 15.9962C11.4293 15.9921 11.754 15.6637 11.75 15.2626L11.7146 11.7153L11.707 11.6168ZM19.0999 12.669L13.1974 18.5714C12.8533 18.9155 12.6092 19.3467 12.4911 19.8189L12.0334 21.6496C11.8344 22.4457 12.5556 23.1668 13.3517 22.9678L15.1824 22.5101C15.6545 22.3921 16.0857 22.148 16.4299 21.8038L22.3323 15.9014C23.2249 15.0088 23.2249 13.5616 22.3323 12.669C21.4397 11.7763 19.9925 11.7763 19.0999 12.669Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/data_usage_edit_24_regular.svg";

Details

Keywords

datavizvisualizationchartmaptrendinggraph.usedindatausagescenarios.