Data Usage Toolbox icon

Use the Data Usage Toolbox 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 { DataUsageToolbox24Regular, DataUsageToolbox24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.25 1.99609C18.7688 1.99609 20 3.22731 20 4.74609V11.3529C19.7616 11.2855 19.51 11.2494 19.25 11.2494H18.5V4.74609C18.5 4.05574 17.9404 3.49609 17.25 3.49609H4.75C4.05964 3.49609 3.5 4.05574 3.5 4.74609V17.2461C3.5 17.9364 4.05964 18.4961 4.75 18.4961H11V19.9961H4.75C3.23122 19.9961 2 18.7649 2 17.2461V4.74609C2 3.22731 3.23122 1.99609 4.75 1.99609H17.25ZM16 6.72881V11.2494H15.75C15.2999 11.2494 14.875 11.3575 14.5 11.5493V6.72881C14.5 6.32597 14.8358 5.9994 15.25 5.9994C15.6297 5.9994 15.9435 6.27381 15.9932 6.62983L16 6.72881ZM11.7146 11.7153L11.7446 14.7194C11.3988 15.0604 11.1519 15.5014 11.0508 15.9955C11.0422 15.9958 11.0336 15.9961 11.0249 15.9962C10.6542 15.9997 10.3451 15.7295 10.293 15.3755L10.2854 15.277L10.25 11.7296C10.246 11.3285 10.5707 11.0001 10.9751 10.9961C11.3458 10.9925 11.6549 11.2628 11.707 11.6168L11.7146 11.7153ZM6.75 7.9994C7.1297 7.9994 7.44349 8.28034 7.49315 8.64485L7.5 8.74618V15.2526C7.5 15.6651 7.16421 15.9994 6.75 15.9994C6.3703 15.9994 6.05651 15.7185 6.00685 15.354L6 15.2526V8.74618C6 8.33374 6.33579 7.9994 6.75 7.9994ZM14 14.9994H13.5C12.6716 14.9994 12 15.671 12 16.4994V17.9994H14.5V17.7494C14.5 17.3352 14.8358 16.9994 15.25 16.9994C15.6642 16.9994 16 17.3352 16 17.7494V17.9994H19V17.7494C19 17.3352 19.3358 16.9994 19.75 16.9994C20.1642 16.9994 20.5 17.3352 20.5 17.7494V17.9994H23V16.4994C23 15.671 22.3284 14.9994 21.5 14.9994H21V13.9994C21 13.0329 20.2165 12.2494 19.25 12.2494H15.75C14.7835 12.2494 14 13.0329 14 13.9994V14.9994ZM15.5 13.9994C15.5 13.8613 15.6119 13.7494 15.75 13.7494H19.25C19.3881 13.7494 19.5 13.8613 19.5 13.9994V14.9994H15.5V13.9994ZM12 21.4994V19.4994H14.5V20.2494C14.5 20.6636 14.8358 20.9994 15.25 20.9994C15.6642 20.9994 16 20.6636 16 20.2494V19.4994H19V20.2494C19 20.6636 19.3358 20.9994 19.75 20.9994C20.1642 20.9994 20.5 20.6636 20.5 20.2494V19.4994H23V21.4994C23 22.3278 22.3284 22.9994 21.5 22.9994H13.5C12.6716 22.9994 12 22.3278 12 21.4994Z" 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_toolbox_24_regular.svg";

Details

Keywords

datavizvisualizationchartmaptrendinggraph.usedindatausagescenarios.