Directions icon

Use the Directions 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 { Directions24Regular, Directions24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Directions24Regular aria-label="Directions" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_directions_24_regular.svg" width="24" height="24" alt="Directions">

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="M9.71315 1.96265C10.9823 0.693898 13.0398 0.693792 14.3088 1.96265L22.0588 9.71264C23.328 10.9818 23.328 13.0401 22.0588 14.3093L14.3088 22.0593C13.0397 23.328 10.9822 23.3281 9.71315 22.0593L1.96316 14.3093C0.694156 13.0402 0.694336 10.9819 1.96316 9.71264L9.71315 1.96265ZM13.2483 3.0232C12.565 2.34015 11.4571 2.34025 10.7737 3.0232L3.02371 10.7732C2.34066 11.4566 2.34048 12.5655 3.02371 13.2488L10.7737 20.9988C11.457 21.6817 12.565 21.6816 13.2483 20.9988L20.9983 13.2488C21.6817 12.5653 21.6817 11.4566 20.9983 10.7732L13.2483 3.0232ZM12.72 6.21948C13.0129 5.92686 13.4877 5.92668 13.7805 6.21948L16.2805 8.71948C16.5733 9.01229 16.5731 9.48712 16.2805 9.78003L13.7805 12.28C13.4876 12.5729 13.0129 12.5729 12.72 12.28C12.4271 11.9871 12.4271 11.5124 12.72 11.2195L13.9397 9.99975H11.7503C10.7838 9.99975 10.0004 10.7834 10.0003 11.7498V15.7497C10.0003 16.1639 9.66433 16.4996 9.25026 16.4997C8.83605 16.4997 8.50026 16.164 8.50026 15.7497V11.7498C8.50039 9.95494 9.95541 8.49975 11.7503 8.49975H13.9397L12.72 7.28003C12.4271 6.98714 12.4271 6.51238 12.72 6.21948Z" 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/directions_24_regular.svg";

Details

Keywords

drivevehicletravel