Data Usage Settings icon

Use the Data Usage Settings 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 { DataUsageSettings24Regular, DataUsageSettings24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 2.99609C18.7688 2.99609 20 4.22731 20 5.74609V11.4982C19.5258 11.3004 19.0232 11.1572 18.5 11.0764V5.74609C18.5 5.05574 17.9404 4.49609 17.25 4.49609H4.75C4.05964 4.49609 3.5 5.05574 3.5 5.74609V18.2461C3.5 18.9365 4.05964 19.4961 4.75 19.4961H11.3122C11.4842 20.0295 11.7232 20.5328 12.0193 20.9961H4.75C3.23122 20.9961 2 19.7649 2 18.2461V5.74609C2 4.22731 3.23122 2.99609 4.75 2.99609H17.25ZM16 7.72881V11.1739C15.4722 11.2986 14.9693 11.4876 14.5 11.7322V7.72881C14.5 7.32597 14.8358 6.9994 15.25 6.9994C15.6297 6.9994 15.9435 7.27381 15.9932 7.62983L16 7.72881ZM11.7146 12.7153L11.7324 14.4996C11.3378 15.2566 11.0879 16.101 11.0192 16.9962C10.651 16.997 10.3448 16.7277 10.293 16.3755L10.2854 16.277L10.25 12.7296C10.246 12.3285 10.5707 12.0001 10.9751 11.9961C11.3458 11.9925 11.6549 12.2628 11.707 12.6168L11.7146 12.7153ZM6.75 8.9994C7.1297 8.9994 7.44349 9.28034 7.49315 9.64485L7.5 9.74618V16.2526C7.5 16.6651 7.16421 16.9994 6.75 16.9994C6.3703 16.9994 6.05651 16.7185 6.00685 16.354L6 16.2526V9.74618C6 9.33374 6.33579 8.9994 6.75 8.9994ZM14.2782 13.9756C14.593 15.0659 13.9386 16.1993 12.837 16.4718L12.2528 16.6164C12.2079 16.9041 12.1846 17.1992 12.1846 17.5001C12.1846 17.8147 12.2101 18.1232 12.2592 18.4235L12.7986 18.5534C13.9111 18.8213 14.5725 19.9663 14.2486 21.0639L14.0623 21.6951C14.5014 22.0808 15.0019 22.3939 15.5464 22.6167L16.0397 22.098C16.8283 21.2687 18.1506 21.2689 18.9388 22.0985L19.4375 22.6232C19.9811 22.403 20.4811 22.0928 20.9204 21.7103L20.7223 21.0244C20.4076 19.9342 21.062 18.8007 22.1635 18.5282L22.7472 18.3838C22.7922 18.0961 22.8155 17.8009 22.8155 17.5001C22.8155 17.1853 22.7899 16.8767 22.7409 16.5764L22.2019 16.4466C21.0894 16.1787 20.4281 15.0337 20.7519 13.9362L20.9381 13.3053C20.499 12.9196 19.9985 12.6064 19.4539 12.3835L18.9608 12.9021C18.1722 13.7313 16.85 13.7311 16.0617 12.9016L15.5629 12.3767C15.0193 12.5969 14.5194 12.9071 14.0801 13.2894L14.2782 13.9756ZM17.5 19.0001C16.6994 19.0001 16.0504 18.3285 16.0504 17.5001C16.0504 16.6716 16.6994 16.0001 17.5 16.0001C18.3007 16.0001 18.9497 16.6716 18.9497 17.5001C18.9497 18.3285 18.3007 19.0001 17.5 19.0001Z" 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_settings_24_regular.svg";

Details