Font Space Tracking Out icon

Use the Font Space Tracking Out 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 { FontSpaceTrackingOut24Regular, FontSpaceTrackingOut24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FontSpaceTrackingOut24Regular aria-label="Font Space Tracking Out" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_font_space_tracking_out_24_regular.svg" width="24" height="24" alt="Font Space Tracking Out">

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="M19.4464 16.1469L19.5305 16.2196L21.7805 18.4696C22.0468 18.7358 22.071 19.1525 21.8531 19.4461L21.7805 19.5302L19.5305 21.7802C19.2376 22.0731 18.7628 22.0731 18.4699 21.7802C18.2036 21.514 18.1794 21.0973 18.3973 20.8037L18.4699 20.7196L19.439 19.749H4.561L5.53053 20.7196L5.60315 20.8037C5.821 21.0973 5.7968 21.514 5.53053 21.7802C5.26426 22.0465 4.8476 22.0707 4.55399 21.8528L4.46987 21.7802L2.21987 19.5302L2.14725 19.4461C1.9536 19.1851 1.95121 18.8269 2.14008 18.5635L2.21987 18.4696L4.46987 16.2196L4.55399 16.1469C4.81498 15.9533 5.17319 15.9509 5.43658 16.1398L5.53053 16.2196L5.60315 16.3037C5.7968 16.5647 5.79919 16.9229 5.61032 17.1863L5.53053 17.2802L4.561 18.249H19.439L18.4699 17.2802C18.2036 17.014 18.1794 16.5973 18.3973 16.3037L18.4699 16.2196C18.7361 15.9533 19.1528 15.9291 19.4464 16.1469ZM7.83595 2.27876L7.89825 2.37113L7.94863 2.4767L12.4486 13.9767C12.5996 14.3624 12.4092 14.7975 12.0235 14.9484C11.6699 15.0868 11.2749 14.9384 11.0952 14.6156L11.0518 14.5233L9.8162 11.3669H4.6832L3.44863 14.5233C3.31027 14.8769 2.93317 15.0663 2.57417 14.9791L2.4769 14.9484C2.12331 14.8101 1.93391 14.433 2.02106 14.074L2.05177 13.9767L6.55177 2.4767C6.77122 1.91588 7.49729 1.8499 7.83595 2.27876ZM20.5952 2.38462C20.7749 2.06182 21.1699 1.91341 21.5235 2.05177C21.8771 2.19013 22.0665 2.56723 21.9793 2.92623L21.9486 3.0235L17.4486 14.5235L17.3983 14.6291C17.1152 15.1239 16.3852 15.1239 16.1021 14.6291L16.0518 14.5235L11.5518 3.0235L11.5211 2.92623C11.4426 2.60313 11.5882 2.26537 11.8759 2.10018L11.9769 2.05177L12.0742 2.02106C12.3973 1.94262 12.735 2.0882 12.9002 2.37586L12.9486 2.4769L16.7502 12.1923L20.5518 2.4769L20.5952 2.38462ZM7.2502 4.8079L5.2702 9.8669H9.2292L7.2502 4.8079Z" 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/font_space_tracking_out_24_regular.svg";

Details