Data Usage icon
The Data Usage icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Data Usage 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 { DataUsage24Regular, DataUsage24Filled } from "@fluentui/react-icons";
export function Example() {
return <DataUsage24Regular aria-label="Data Usage" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_data_usage_24_regular.svg" width="24" height="24" alt="Data Usage"> 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.25 2.99609C19.7688 2.99609 21 4.22731 21 5.74609V18.2461C21 19.7649 19.7688 20.9961 18.25 20.9961H5.75C4.23122 20.9961 3 19.7649 3 18.2461V5.74609C3 4.22731 4.23122 2.99609 5.75 2.99609H18.25ZM18.25 4.49609H5.75C5.05964 4.49609 4.5 5.05574 4.5 5.74609V18.2461C4.5 18.9364 5.05964 19.4961 5.75 19.4961H18.25C18.9404 19.4961 19.5 18.9364 19.5 18.2461V5.74609C19.5 5.05574 18.9404 4.49609 18.25 4.49609ZM7.75 8.9994C8.1297 8.9994 8.44349 9.28034 8.49315 9.64485L8.5 9.74618V16.2526C8.5 16.6651 8.16421 16.9994 7.75 16.9994C7.3703 16.9994 7.05651 16.7185 7.00685 16.354L7 16.2526V9.74618C7 9.33374 7.33579 8.9994 7.75 8.9994ZM16.25 6.9994C16.6297 6.9994 16.9435 7.27381 16.9932 7.62983L17 7.72881V16.27C17 16.6728 16.6642 16.9994 16.25 16.9994C15.8703 16.9994 15.5565 16.725 15.5068 16.369L15.5 16.27V7.72881C15.5 7.32597 15.8358 6.9994 16.25 6.9994ZM11.9751 11.9961C12.3458 11.9925 12.6549 12.2628 12.707 12.6168L12.7146 12.7153L12.75 16.2626C12.754 16.6637 12.4293 16.9921 12.0249 16.9962C11.6542 16.9997 11.3451 16.7295 11.293 16.3755L11.2854 16.277L11.25 12.7296C11.246 12.3285 11.5707 12.0001 11.9751 11.9961Z" 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_24_regular.svg";Details
| Name | Data Usage |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_data_usage_24_regular.svg |
| Filled file | ic_fluent_data_usage_24_filled.svg |
| React components | DataUsage24Regular, DataUsage24Filled |
| License | MIT (© Microsoft Corporation) |
Keywords
datavizvisualizationchartmaptrendinggraph.usedindatausagescenarios.