Plant Cattail icon

Used to represent lake or beach area. The Plant Cattail icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_plant_cattail_24_regular.svg

Plant Cattail icon in React

npm install @fluentui/react-icons

import { PlantCattail24Regular } from "@fluentui/react-icons";

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

Plant Cattail icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/plant_cattail_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/plant_cattail_24_regular.svg" width="24" height="24" alt="Plant Cattail">

Plant Cattail icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.PlantCattail())" />

Plant Cattail icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.plant_cattail_24_regular)

Plant Cattail icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF0543;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF0543;" FontSize="24" />

Plant Cattail icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_plant_cattail_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f0543";
  font-size: 24px;
}

Plant Cattail icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_plant_cattail_24_regular" />

// Kotlin
R.drawable.ic_fluent_plant_cattail_24_regular

Plant Cattail icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .plantCattail24Regular)

Plant Cattail icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NamePlant Cattail
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_plant_cattail_24_regular.svg
Filled fileic_fluent_plant_cattail_24_filled.svg
React (Regular)PlantCattail20Regular, PlantCattail24Regular
React (Filled)PlantCattail20Filled, PlantCattail24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

Related icons