Plant Cattail icon

Use the Plant Cattail 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 { PlantCattail24Regular, PlantCattail24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PlantCattail24Regular aria-label="Plant Cattail" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_plant_cattail_24_regular.svg" width="24" height="24" alt="Plant Cattail">

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="M12 2C10.3431 2 9 3.34315 9 5V9C9 10.3979 9.95608 11.5725 11.25 11.9055V14.6893L7.78033 11.2197C7.48744 10.9268 7.01256 10.9268 6.71967 11.2197C6.42678 11.5126 6.42678 11.9874 6.71967 12.2803L11.25 16.8107V18.25C11.25 18.6642 11.5858 19 12 19C12.4142 19 12.75 18.6642 12.75 18.25V16.8107L17.2803 12.2803C17.5732 11.9874 17.5732 11.5126 17.2803 11.2197C16.9874 10.9268 16.5126 10.9268 16.2197 11.2197L12.75 14.6893V11.9055C14.0439 11.5725 15 10.3979 15 9V5C15 3.34315 13.6569 2 12 2ZM10.5 5C10.5 4.17157 11.1716 3.5 12 3.5C12.8284 3.5 13.5 4.17157 13.5 5V9C13.5 9.82843 12.8284 10.5 12 10.5C11.1716 10.5 10.5 9.82843 10.5 9V5ZM5.89148 15.004C6.38541 14.8094 6.93263 14.6393 7.5222 14.4971L8.79087 15.7657C7.89954 15.9213 7.10405 16.1385 6.44126 16.3996C5.74635 16.6733 5.23477 16.9807 4.90949 17.2837C4.5853 17.5856 4.5 17.8282 4.5 17.9999C4.5 18.1716 4.5853 18.4142 4.90949 18.7161C5.23477 19.0191 5.74635 19.3264 6.44126 19.6002C7.8266 20.1459 9.79163 20.4999 12 20.4999C14.2084 20.4999 16.1734 20.1459 17.5587 19.6002C18.2537 19.3264 18.7652 19.0191 19.0905 18.7161C19.4147 18.4142 19.5 18.1716 19.5 17.9999C19.5 17.8282 19.4147 17.5856 19.0905 17.2837C18.7652 16.9807 18.2537 16.6733 17.5587 16.3996C16.8959 16.1385 16.1005 15.9213 15.2091 15.7657L16.4778 14.4971C17.0674 14.6393 17.6146 14.8094 18.1085 15.004C18.9066 15.3184 19.6032 15.7113 20.1128 16.186C20.6236 16.6617 21 17.2741 21 17.9999C21 18.7257 20.6236 19.338 20.1128 19.8138C19.6032 20.2884 18.9066 20.6814 18.1085 20.9958C16.508 21.6263 14.348 21.9999 12 21.9999C9.65202 21.9999 7.49205 21.6263 5.89148 20.9958C5.09344 20.6814 4.39682 20.2884 3.88716 19.8138C3.3764 19.338 3 18.7257 3 17.9999C3 17.2741 3.3764 16.6617 3.88716 16.186C4.39682 15.7113 5.09344 15.3184 5.89148 15.004Z" 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/plant_cattail_24_regular.svg";

Details

Keywords

plantlakebeach