Mountain Location Top icon

Use the Mountain Location Top 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 { MountainLocationTop24Regular, MountainLocationTop24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MountainLocationTop24Regular aria-label="Mountain Location Top" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_mountain_location_top_24_regular.svg" width="24" height="24" alt="Mountain Location Top">

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.5126 7.55457C13.2426 7.95037 12.9721 8.31983 12.736 8.63107C12.3613 9.1251 11.6387 9.1251 11.264 8.63107C11.0142 8.30173 10.7258 7.90722 10.4403 7.48528C10.2908 7.26424 10.142 7.03568 10 6.80501C9.44922 5.91044 9 4.98429 9 4.34315C9 2.68629 10.3431 1 12 1C13.6569 1 15 2.68629 15 4.34315C15 4.86909 14.6977 5.58684 14.285 6.32162C14.0513 6.73772 13.7822 7.15929 13.5126 7.55457ZM12.8712 5.22123C13.2519 4.94918 13.5 4.50357 13.5 4C13.5 3.17157 12.8284 2.5 12 2.5C11.1716 2.5 10.5 3.17157 10.5 4C10.5 4.50357 10.7481 4.94918 11.1288 5.22123C11.1288 5.22122 11.1288 5.22123 11.1288 5.22123C11.3744 5.39672 11.6751 5.49999 12 5.49999C12.3249 5.49999 12.6256 5.39672 12.8712 5.22123C12.8712 5.22123 12.8712 5.22122 12.8712 5.22123ZM6.07765 11.823L9.75878 8.25987C9.47779 7.85419 9.19061 7.41352 8.93399 6.97061L2.98964 12.7244C2.35711 13.3366 2 14.1793 2 15.0596V18.75C2 19.9926 3.00736 21 4.25 21H19.75C20.9926 21 22 19.9926 22 18.75V15.0596C22 14.1793 21.6429 13.3366 21.0104 12.7244L15.066 6.97061C14.8094 7.41352 14.5222 7.85419 14.2412 8.25987L16.3225 10.2745C15.6109 10.36 14.9393 10.5308 14.3025 10.7384C13.6215 10.9605 12.9191 11.2495 12.2622 11.5197C11.8749 11.679 11.5035 11.8318 11.1616 11.9606C10.1789 12.3306 9.28382 12.5735 8.37965 12.5426C7.6694 12.5184 6.9134 12.3234 6.07765 11.823ZM4.03288 13.8022L4.96903 12.896C6.12653 13.6672 7.23669 14.0045 8.32853 14.0417C9.53059 14.0827 10.6479 13.7568 11.6902 13.3643C12.1283 13.1993 12.5345 13.0314 12.9323 12.8669C13.5361 12.6172 14.1204 12.3756 14.7676 12.1645C15.7591 11.8412 16.7583 11.646 17.8344 11.7378L19.9671 13.8022C20.3077 14.1319 20.5 14.5856 20.5 15.0596V18.75C20.5 19.1642 20.1642 19.5 19.75 19.5H4.25C3.83579 19.5 3.5 19.1642 3.5 18.75V15.0596C3.5 14.5856 3.69229 14.1319 4.03288 13.8022Z" 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_location_top_24_regular.svg";

Details

Keywords

mountaintravelvacationlocationhikingpinbasesummit