Network Check icon

Use the Network Check 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 { NetworkCheck24Regular, NetworkCheck24Filled } from "@fluentui/react-icons";

export function Example() {
  return <NetworkCheck24Regular aria-label="Network Check" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_network_check_24_regular.svg" width="24" height="24" alt="Network Check">

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="M10.0493 15.4204L16.3061 6.94447C16.5132 6.66387 16.8963 6.58046 17.2014 6.74954C17.4759 6.90173 17.6106 7.21593 17.5414 7.51374L17.5106 7.61216L13.6406 17.4112C13.2206 18.4746 12.018 18.9962 10.9546 18.5762C10.8711 18.5432 10.7899 18.5049 10.7114 18.4614C9.71114 17.9069 9.34974 16.6466 9.90419 15.6463L9.97309 15.531L10.0493 15.4204L16.3061 6.94447L10.0493 15.4204ZM13.8501 12.7973L11.2561 16.3112L11.2161 16.3735C11.0633 16.6492 11.1629 16.9966 11.4386 17.1494L11.5056 17.1811C11.7692 17.2852 12.0639 17.1792 12.2045 16.9434L12.2455 16.8602L13.8501 12.7973ZM12.1005 10.8713L10.8739 12.5314C10.5698 12.6309 10.275 12.7763 9.99931 12.9693C9.1395 13.5714 8.6273 14.5263 8.58343 15.5557C8.56579 15.9695 8.21601 16.2907 7.80217 16.2731C7.38833 16.2554 7.06715 15.9056 7.08479 15.4918C7.14834 14.0008 7.89256 12.6133 9.13895 11.7406C10.0396 11.11 11.0807 10.8297 12.1005 10.8713ZM16.2676 13.6228C16.5468 14.2088 16.7032 14.8421 16.7302 15.489C16.7475 15.9028 16.426 16.2523 16.0122 16.2696C15.7394 16.281 15.4945 16.1452 15.3544 15.9328L16.2676 13.6228ZM14.0337 8.25334L13.0652 9.56413C11.4715 9.26326 9.76261 9.58026 8.32913 10.584C7.14104 11.4159 6.30103 12.609 5.91046 13.9742C5.79652 14.3724 5.38133 14.6029 4.98309 14.4889C4.58486 14.375 4.35439 13.9598 4.46832 13.5616C4.95266 11.8687 5.99632 10.3863 7.46877 9.35526C9.45584 7.9639 11.8695 7.63634 14.0337 8.25334ZM17.5433 10.3913C17.7949 10.6579 18.03 10.9465 18.2465 11.2557C18.7405 11.9612 19.1086 12.7328 19.3433 13.5444C19.4584 13.9423 19.2291 14.3582 18.8312 14.4733C18.4333 14.5883 18.0175 14.3591 17.9024 13.9612C17.7134 13.3076 17.4168 12.686 17.0178 12.116L16.9165 11.9783L17.5433 10.3913ZM15.981 5.85225L15.893 5.9063C15.7706 5.98826 15.6573 6.08668 15.5566 6.20079L15.4602 6.3201L14.9193 7.05303C12.2378 6.12094 9.16209 6.44601 6.65895 8.19872C5.1563 9.25089 4.03087 10.6982 3.38089 12.3705C3.23083 12.7566 2.79621 12.9479 2.41013 12.7978C2.02406 12.6478 1.83273 12.2131 1.98279 11.8271C2.73946 9.88031 4.05094 8.19371 5.79859 6.97C8.89049 4.80502 12.7329 4.51149 15.981 5.85225ZM18.6098 7.41406C19.3647 8.02542 20.0473 8.75072 20.6318 9.58549C21.1229 10.2869 21.5239 11.036 21.8307 11.82C21.9816 12.2057 21.7913 12.6408 21.4055 12.7917C21.0198 12.9427 20.5847 12.7523 20.4338 12.3666C20.1703 11.6933 19.8258 11.0495 19.4031 10.4459C19.0174 9.89504 18.582 9.39971 18.1072 8.96166L18.4884 7.9983C18.5639 7.80709 18.6034 7.6097 18.6098 7.41406Z" 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/network_check_24_regular.svg";

Details

Keywords

badgemetermeasurementneedlescale