Flower icon
Download the Flower icon as free SVG or PNG. Compare outline and filled styles. Copy React, Vue or Svelte code.
- blossom
- bloom
- plant
- garden
- rose
- spring
- nature
- floral
- daisy
Style
Size
Stroke
Filled icons have no stroke
Color
- Category
- general
- Styles
- Outline, filled
- Component
- IconFlower
- License
- MIT · Paweł Kuna
outline/flower.svg
filled/flower.svgCode
Copy it the way you use it
flower.svg
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
<path d="M12 2a3 3 0 0 1 3 3c0 .562 -.259 1.442 -.776 2.64l-.724 1.36l1.76 -1.893c.499 -.6 .922 -1 1.27 -1.205a2.968 2.968 0 0 1 4.07 1.099a3.011 3.011 0 0 1 -1.09 4.098c-.374 .217 -.99 .396 -1.846 .535l-2.664 .366l2.4 .326c1 .145 1.698 .337 2.11 .576a3.011 3.011 0 0 1 1.09 4.098a2.968 2.968 0 0 1 -4.07 1.098c-.348 -.202 -.771 -.604 -1.27 -1.205l-1.76 -1.893l.724 1.36c.516 1.199 .776 2.079 .776 2.64a3 3 0 0 1 -6 0c0 -.562 .259 -1.442 .776 -2.64l.724 -1.36l-1.76 1.893c-.499 .601 -.922 1 -1.27 1.205a2.968 2.968 0 0 1 -4.07 -1.098a3.011 3.011 0 0 1 1.09 -4.098c.374 -.218 .99 -.396 1.846 -.536l2.664 -.366l-2.4 -.325c-1 -.145 -1.698 -.337 -2.11 -.576a3.011 3.011 0 0 1 -1.09 -4.099a2.968 2.968 0 0 1 4.07 -1.099c.348 .203 .771 .604 1.27 1.205l1.76 1.894c-1 -2.292 -1.5 -3.625 -1.5 -4a3 3 0 0 1 3 -3" />
</svg>Use the Flower icon
For a decorative icon beside text, add aria-hidden="true" to the SVG. For an icon-only control, put its accessible name on the button or link.
React example
import { IconFlower } from '@tabler/icons-react';
<IconFlower size={24} stroke={2} />Vue example
import { IconFlower } from '@tabler/icons-vue';
<IconFlower :size="24" :stroke="2" />Svelte 5 example
import { IconFlower } from '@tabler/icons-svelte-runes';
<IconFlower size={24} stroke={2} />Compare variants and alternatives
Related