Umbrella icon

Use the Umbrella 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 { Umbrella24Regular, Umbrella24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M10.2483 10.9125C10.7208 10.5137 11.3245 10.1786 12 10.1786C12.6755 10.1786 13.2792 10.5137 13.7517 10.9125C13.9823 11.1071 14.165 11.3031 14.2892 11.4499C14.351 11.5229 14.3972 11.5823 14.4266 11.6216L14.4632 11.6719C14.6028 11.8777 14.8346 12 15.0833 12C15.3316 12 15.5645 11.8761 15.7041 11.6709C15.7335 11.6316 15.8157 11.5229 15.8774 11.4499C16.0017 11.3031 16.1843 11.1071 16.415 10.9125C16.8875 10.5137 17.4912 10.1786 18.1667 10.1786C18.8421 10.1786 19.4459 10.5137 19.9184 10.9125C20.149 11.1071 20.3317 11.3031 20.4559 11.4499L20.6292 11.6709C20.8141 11.9435 21.1551 12.0636 21.4699 11.967C21.7849 11.8704 22 11.5795 22 11.25C22 6.57482 17.9532 2 12 2C6.04683 2 2 6.57482 2 11.25C2 11.5795 2.21506 11.8704 2.53008 11.967C2.84494 12.0636 3.18594 11.9435 3.37075 11.6709L3.54408 11.4499C3.66835 11.3031 3.85098 11.1071 4.08162 10.9125C4.55415 10.5137 5.15786 10.1786 5.83333 10.1786C6.50881 10.1786 7.11252 10.5137 7.58505 10.9125C7.81568 11.1071 7.99832 11.3031 8.12258 11.4499C8.18431 11.5229 8.26647 11.6316 8.29592 11.6709C8.43555 11.8761 8.66838 12 8.91667 12C9.16536 12 9.39721 11.8777 9.53676 11.6719L9.57337 11.6216C9.60282 11.5823 9.64903 11.5229 9.71075 11.4499C9.83502 11.3031 10.0177 11.1071 10.2483 10.9125ZM3.79276 9.27754C4.71336 6.185 7.7432 3.5 12 3.5C16.2568 3.5 19.2866 6.185 20.2072 9.27754C19.6567 8.94553 18.9666 8.67857 18.1667 8.67857C16.9921 8.67857 16.0542 9.25416 15.4475 9.76611C15.3131 9.87958 15.1914 9.99278 15.0833 10.1005C14.9752 9.99278 14.8536 9.87958 14.7191 9.76611C14.1125 9.25416 13.1745 8.67857 12 8.67857C10.8255 8.67857 9.88752 9.25416 9.28088 9.76611C9.14642 9.87958 9.02477 9.99278 8.91667 10.1005C8.80856 9.99278 8.68691 9.87958 8.55245 9.76611C7.94581 9.25416 7.00786 8.67857 5.83333 8.67857C5.03345 8.67857 4.34328 8.94553 3.79276 9.27754ZM12 11.1786C11.7641 11.1786 11.5102 11.2614 11.25 11.4183V19C11.25 19.8285 10.5784 20.5 9.75 20.5C8.92157 20.5 8.25 19.8285 8.25 19V18.75C8.25 18.3358 7.91421 18 7.5 18C7.08579 18 6.75 18.3358 6.75 18.75V19C6.75 20.6569 8.09315 22 9.75 22C11.4069 22 12.75 20.6569 12.75 19V11.4183C12.4898 11.2614 12.2359 11.1786 12 11.1786Z" 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/umbrella_24_regular.svg";

Details

Keywords

bumbershootrainanalog