Mountain Trail icon

Use the Mountain Trail 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 { MountainTrail24Regular, MountainTrail24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MountainTrail24Regular aria-label="Mountain Trail" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_mountain_trail_24_regular.svg" width="24" height="24" alt="Mountain Trail">

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="M13.9229 2.7846C12.8541 1.73924 11.1459 1.73924 10.0771 2.7846L2.97752 9.72854C2.35238 10.34 2 11.1775 2 12.052V18.75C2 19.9926 3.00736 21 4.25 21H18.5894C18.5961 21.0001 18.6027 21.0001 18.6093 21H19.75C20.9926 21 22 19.9926 22 18.75V12.052C22 11.1775 21.6476 10.34 21.0225 9.72854L13.9229 2.7846ZM18.643 19.5L18.5464 19.4882C18.4545 19.4768 18.3187 19.4596 18.1455 19.4365C17.799 19.3903 17.3028 19.3206 16.7071 19.2272C15.5138 19.0401 13.9286 18.7588 12.3485 18.3814C10.7587 18.0017 9.21547 17.5342 8.08484 16.9859C7.51766 16.7108 7.09607 16.4351 6.82626 16.1714C6.55787 15.9091 6.5 15.7212 6.5 15.6001C6.5 15.288 6.69957 14.9531 7.52094 14.614C8.32081 14.2838 9.43325 14.0753 10.658 13.8847C10.8863 13.8492 11.1189 13.8142 11.3528 13.7791C12.3281 13.6326 13.3273 13.4826 14.1429 13.2706C14.6511 13.1385 15.145 12.9691 15.5459 12.7299C15.9465 12.4908 16.341 12.1283 16.4776 11.582C16.621 11.0082 16.4408 10.4956 16.1631 10.0908C15.8957 9.70106 15.5062 9.35989 15.1035 9.06068C14.5902 8.67939 13.9297 8.2811 13.2917 7.89636C12.9572 7.69468 12.6288 7.49669 12.331 7.30675C11.3807 6.70073 10.7007 6.15689 10.4198 5.63858C10.2965 5.41115 10.2668 5.21731 10.3075 5.02245C10.3514 4.81217 10.4958 4.51499 10.8803 4.13042C10.9242 4.08653 10.9615 4.03856 10.9923 3.98773L11.126 3.85695C11.6118 3.38179 12.3882 3.38179 12.874 3.85695L19.9736 10.8009C20.3103 11.1301 20.5 11.5811 20.5 12.052V18.75C20.5 19.1642 20.1642 19.5 19.75 19.5H18.643ZM8.93866 5.99629C8.98401 6.11914 9.03866 6.23828 9.10103 6.35336C9.58999 7.25547 10.5988 7.98115 11.5245 8.57146C11.9008 8.81148 12.2674 9.03189 12.6172 9.24224C13.206 9.59632 13.7474 9.92194 14.209 10.2648C14.5652 10.5294 14.7985 10.7533 14.9262 10.9394C15.0436 11.1105 15.0308 11.1846 15.0224 11.2182C15.0207 11.2248 14.9991 11.3094 14.7772 11.4418C14.5557 11.5741 14.2208 11.7005 13.7656 11.8188C13.0343 12.0089 12.1393 12.1436 11.1715 12.2893C10.9276 12.326 10.679 12.3634 10.4273 12.4025C9.22117 12.5902 7.93728 12.8194 6.94855 13.2275C5.98131 13.6268 5 14.331 5 15.6001C5 16.2695 5.34364 16.8199 5.7779 17.2442C6.21074 17.6672 6.79293 18.0264 7.4303 18.3355C8.36144 18.7871 9.49968 19.1736 10.6762 19.5H4.25C3.83579 19.5 3.5 19.1642 3.5 18.75V12.052C3.5 11.5811 3.68974 11.1301 4.02636 10.8009L8.93866 5.99629Z" 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/mountain_trail_24_regular.svg";

Details

Keywords

mountaintravelvacationlocationhikingskirunpathtrailexercise