Tent icon
Used to represent a tent & general outdoor event scenarios. The Tent 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 Tent 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 { Tent24Regular, Tent24Filled } from "@fluentui/react-icons";
export function Example() {
return <Tent24Regular aria-label="Tent" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_tent_24_regular.svg" width="24" height="24" alt="Tent"> 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="M11.2197 2.21967C11.5054 1.93389 11.9663 1.92595 12.2617 2.20171L14.0181 3.84102C15.2959 5.03359 16.7188 6.06047 18.2532 6.89742C18.685 7.13294 18.9802 7.55844 19.0498 8.04533L20.4005 17.5H21.25C21.6642 17.5 22 17.8358 22 18.25C22 18.6642 21.6642 19 21.25 19H2.75C2.33579 19 2 18.6642 2 18.25C2 17.8358 2.33579 17.5 2.75 17.5H3.59953L4.95533 8.00941C5.0203 7.55461 5.28676 7.1533 5.6807 6.91694C7.07826 6.0784 8.36771 5.07163 9.52017 3.91917L11.2197 2.21967ZM5.11476 17.5H7.24627C8.81781 15.3333 10.005 12.9113 10.755 10.34L11.28 8.54C11.3733 8.22 11.6667 8 12 8C12.3333 8 12.6267 8.22 12.72 8.54L13.245 10.34C13.995 12.9113 15.1822 15.3333 16.7537 17.5H18.8852L17.5649 8.25747C17.5623 8.23914 17.5511 8.22312 17.5349 8.21426C15.8899 7.317 14.3645 6.21611 12.9947 4.9376L11.768 3.79269L10.5808 4.97983C9.34165 6.21901 7.95517 7.30154 6.45244 8.20318C6.44582 8.20715 6.44134 8.21389 6.44025 8.22154L5.11476 17.5ZM14.9293 17.5C13.6793 15.61 12.6934 13.5566 12 11.3967C11.3066 13.5566 10.3207 15.61 9.07071 17.5H14.9293Z" 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/tent_24_regular.svg";Details
| Name | Tent |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_tent_24_regular.svg |
| Filled file | ic_fluent_tent_24_filled.svg |
| React components | Tent24Regular, Tent24Filled |
| License | MIT (© Microsoft Corporation) |