Font Space Tracking In icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M8.44641 16.1469L8.53053 16.2196L10.7805 18.4696C11.0468 18.7358 11.071 19.1525 10.8531 19.4461L10.7805 19.5302L8.53053 21.7802C8.23764 22.0731 7.76276 22.0731 7.46987 21.7802C7.2036 21.514 7.1794 21.0973 7.39725 20.8037L7.46987 20.7196L8.439 19.749L3.7502 19.7499C3.33599 19.7499 3.0002 19.4141 3.0002 18.9999C3.0002 18.6202 3.28235 18.3064 3.64843 18.2567L3.7502 18.2499L8.439 18.249L7.46987 17.2802C7.2036 17.014 7.1794 16.5973 7.39725 16.3037L7.46987 16.2196C7.73614 15.9533 8.1528 15.9291 8.44641 16.1469ZM15.554 16.1469C15.815 15.9533 16.1732 15.9509 16.4366 16.1398L16.5305 16.2196L16.6032 16.3037C16.7968 16.5647 16.7992 16.9229 16.6103 17.1863L16.5305 17.2802L15.561 18.249L20.2502 18.2499C20.6644 18.2499 21.0002 18.5857 21.0002 18.9999C21.0002 19.3796 20.718 19.6934 20.352 19.7431L20.2502 19.7499L15.561 19.749L16.5305 20.7196L16.6032 20.8037C16.821 21.0973 16.7968 21.514 16.5305 21.7802C16.2643 22.0465 15.8476 22.0707 15.554 21.8528L15.4699 21.7802L13.2199 19.5302L13.1473 19.4461C12.9536 19.1851 12.9512 18.8269 13.1401 18.5635L13.2199 18.4696L15.4699 16.2196L15.554 16.1469ZM8.83595 2.27876L8.89825 2.37113L8.94863 2.4767L13.4486 13.9767C13.5996 14.3624 13.4092 14.7975 13.0235 14.9484C12.6699 15.0868 12.2749 14.9384 12.0952 14.6156L12.0518 14.5233L10.8162 11.3669H5.6832L4.44863 14.5233C4.31027 14.8769 3.93317 15.0663 3.57417 14.9791L3.4769 14.9484C3.12331 14.8101 2.93391 14.433 3.02106 14.074L3.05177 13.9767L7.55177 2.4767C7.77122 1.91588 8.49729 1.8499 8.83595 2.27876ZM19.5952 2.38462C19.7749 2.06182 20.1699 1.91341 20.5235 2.05177C20.8771 2.19013 21.0665 2.56723 20.9793 2.92623L20.9486 3.0235L16.4486 14.5235L16.3983 14.6291C16.1152 15.1239 15.3852 15.1239 15.1021 14.6291L15.0518 14.5235L10.5518 3.0235L10.5211 2.92623C10.4426 2.60313 10.5882 2.26537 10.8759 2.10018L10.9769 2.05177L11.0742 2.02106C11.3973 1.94262 11.735 2.0882 11.9002 2.37586L11.9486 2.4769L15.7502 12.1923L19.5518 2.4769L19.5952 2.38462ZM8.2502 4.8079L6.2702 9.8669H10.2292L8.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_in_24_regular.svg";

Details

Keywords

typetexttypographyeditcreate