Mountain Location Bottom icon

Use the Mountain Location Bottom 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 { MountainLocationBottom24Regular, MountainLocationBottom24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 21H10.2905C9.96856 20.5669 9.59934 20.0455 9.25491 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.8009L4.95807 9.8896C6.11917 10.6654 7.23257 11.0046 8.32755 11.042C9.52962 11.083 10.647 10.757 11.6892 10.3645C12.1273 10.1995 12.5335 10.0316 12.9313 9.86708C13.5351 9.61742 14.1195 9.37577 14.7666 9.16473C15.7686 8.83796 16.7785 8.64212 17.8676 8.74104L19.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.5H14.7451C14.4007 20.0455 14.0314 20.5669 13.7095 21H19.75C20.9926 21 22 19.9926 22 18.75V12.052C22 11.1775 21.6476 10.34 21.0225 9.72854L13.9229 2.7846ZM11.126 3.85695C11.6118 3.38179 12.3882 3.38179 12.874 3.85695L16.3633 7.26975C15.6362 7.35357 14.9508 7.52691 14.3016 7.73864C13.6205 7.96073 12.9181 8.24968 12.2612 8.51991C11.874 8.6792 11.5025 8.83201 11.1606 8.96076C10.178 9.3308 9.28284 9.57367 8.37868 9.54283C7.66347 9.51844 6.90187 9.32088 6.05916 8.81266L11.126 3.85695ZM11.264 20.6311C11.4391 20.8619 11.69 20.9848 11.946 21C11.982 21.0021 12.018 21.0021 12.054 21C12.31 20.9848 12.5609 20.8619 12.736 20.6311C12.9829 20.3056 13.2675 19.9164 13.5497 19.5C14.2828 18.4184 15 17.1533 15 16.3431C15 14.6863 13.6569 13 12 13C10.3431 13 9 14.6863 9 16.3431C9 17.1533 9.71723 18.4184 10.4503 19.5C10.7325 19.9164 11.0171 20.3056 11.264 20.6311ZM13.5 16C13.5 16.8284 12.8284 17.5 12 17.5C11.1716 17.5 10.5 16.8284 10.5 16C10.5 15.1716 11.1716 14.5 12 14.5C12.8284 14.5 13.5 15.1716 13.5 16Z" 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_bottom_24_regular.svg";

Details

Keywords

mountaintravelvacationlocationhikingpinbasesummit