Plant Grass icon
Used to represent a type of allergen around grass. The Plant Grass icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Plant Grass 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 { PlantGrass24Regular, PlantGrass24Filled } from "@fluentui/react-icons";
export function Example() {
return <PlantGrass24Regular aria-label="Plant Grass" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_plant_grass_24_regular.svg" width="24" height="24" alt="Plant Grass"> 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="M8.31677 3.25881L8.31827 3.26055L8.32096 3.26367L8.32981 3.274L8.361 3.31086C8.38761 3.34253 8.42565 3.38833 8.47376 3.44757C8.56998 3.56602 8.7066 3.73839 8.87278 3.95928C9.20489 4.40075 9.65636 5.03779 10.1396 5.82714C10.7653 6.84903 11.452 8.13873 12 9.59954C12.548 8.13873 13.2347 6.84903 13.8604 5.82714C14.3436 5.03779 14.7951 4.40075 15.1272 3.95928C15.2934 3.73839 15.43 3.56602 15.5262 3.44757C15.5744 3.38833 15.6124 3.34253 15.639 3.31086L15.6702 3.274L15.679 3.26367L15.6817 3.26055L15.6826 3.2595C15.8877 3.02289 16.2188 2.93787 16.5121 3.0473C16.8055 3.15674 17 3.4369 17 3.75V10.3063C17.374 9.5429 17.7638 8.95151 18.1383 8.49383C18.6102 7.91703 19.0532 7.55853 19.3993 7.33918C19.5718 7.22984 19.7186 7.1561 19.8308 7.10741C19.8869 7.08308 19.9341 7.06507 19.9715 7.05202C19.9902 7.04549 20.0064 7.04021 20.02 7.036L20.0383 7.03048L20.046 7.02828L20.0495 7.02731L20.0511 7.02686C20.0533 7.02625 20.0527 7.02643 20.0527 7.02643C20.2782 6.96493 20.5195 7.01209 20.7052 7.15397C20.891 7.29586 21 7.51625 21 7.75V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V7.75C3 7.51625 3.10899 7.29586 3.29475 7.15397C3.48052 7.01209 3.72182 6.96493 3.94734 7.02643C3.94734 7.02643 3.94671 7.02626 3.9489 7.02686L3.95053 7.02731L3.95399 7.02828L3.96166 7.03048L3.98003 7.036C3.9936 7.04021 4.0098 7.04549 4.02848 7.05202C4.06585 7.06507 4.11312 7.08308 4.16918 7.10741C4.28138 7.1561 4.4282 7.22984 4.60072 7.33918C4.9468 7.55853 5.3898 7.91703 5.86172 8.49383C6.23619 8.95151 6.62595 9.5429 7 10.3063V3.75C7 3.4369 7.19451 3.15674 7.48787 3.0473C7.78123 2.93787 8.1117 3.02219 8.31677 3.25881ZM4.5 9.21196V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H17.75C18.7165 19.5 19.5 18.7165 19.5 17.75V9.21196C19.435 9.2826 19.368 9.35966 19.2992 9.44368C18.5552 10.353 17.5959 12.1009 16.9875 15.3866C16.9169 15.7677 16.5675 16.0323 16.1814 15.9969C15.7954 15.9614 15.5 15.6376 15.5 15.25V6.04064C15.3832 6.2194 15.2626 6.40959 15.1396 6.61037C14.2275 8.10022 13.21 10.1433 12.7339 12.4045C12.6608 12.7516 12.3547 13 12 13C11.6453 13 11.3392 12.7516 11.2661 12.4045C10.79 10.1433 9.77251 8.10022 8.86036 6.61037C8.73744 6.40959 8.61676 6.2194 8.5 6.04064V15.25C8.5 15.6376 8.20459 15.9614 7.81857 15.9969C7.43255 16.0323 7.08312 15.7677 7.01254 15.3866C6.40409 12.1009 5.44475 10.353 4.70078 9.44368C4.63204 9.35966 4.56497 9.2826 4.5 9.21196Z" 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_grass_24_regular.svg";Details
| Name | Plant Grass |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_plant_grass_24_regular.svg |
| Filled file | ic_fluent_plant_grass_24_filled.svg |
| React components | PlantGrass24Regular, PlantGrass24Filled |
| License | MIT (© Microsoft Corporation) |