Coconut Tree
The coconut tree icon represents a tropical tree commonly found in coastal areas, known for its versatile uses and cultural significance.
Exports at 24 × 24 px
Code
Coconut Tree in your framework
In any framework. Customize it above, and the code follows.
export const CoconutTreeIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48" fill="none" stroke="currentColor" {...props}>
<g fill="none" stroke="#000" strokeLinecap="round" strokeWidth="4"><path strokeLinejoin="round" d="M22 14.0001C22 14.0001 19.2998 19.2934 18 26.0001C16.7001 32.7068 17 42.0001 17 42.0001"/><path fill="#2F88FF" strokeLinejoin="round" d="M33.953 23.2722C34.2986 23.5017 34.8456 23.6634 35.3814 23.7751C36.3128 23.9692 37.1735 23.329 37.1492 22.3779C37.1041 20.6042 36.4122 17.7028 32.8908 15.3644C29.5662 13.1566 26.2646 13.1264 24.1832 13.4437C22.996 13.6247 22.5233 14.9219 23.2046 15.9109C23.8127 16.7937 24.5211 17.6853 25 17.8556C26 18.2111 27.2034 17.2737 28.0797 17.8556C28.956 18.4375 28.6953 19.7807 29.5716 20.3626C30.4479 20.9445 31.5848 20.1832 32.4611 20.7651C33.3373 21.3471 33.0767 22.6903 33.953 23.2722Z"/><path fill="#2F88FF" strokeLinejoin="round" d="M20.0002 16.9999C20.858 16.714 21.3888 15.7739 21.686 15.0214C21.9317 14.3995 21.7122 13.713 21.1366 13.3727C19.8409 12.6068 17.0755 11.5589 12.7616 12.8117C8.49748 14.05 7.37106 16.8675 7.08518 18.5267C6.95141 19.3031 7.48001 20.0054 8.263 20.0924C8.8239 20.1548 9.43921 20.1271 9.8069 19.815C10.6138 19.1302 10.8323 18.2326 11.7338 17.991C12.6353 17.7495 13.413 18.8488 14.3146 18.6072C15.2161 18.3657 15.3399 17.0248 16.2414 16.7832C17.143 16.5416 18.5002 17.4999 20.0002 16.9999Z"/><path fill="#2F88FF" strokeLinejoin="round" d="M27 6.00012C24.4995 7.00013 21.9993 12.0001 22.0001 14.0001L35.0009 8.00014C33.6202 5.60868 29.5005 5.00012 27 6.00012Z"/><path fill="#2F88FF" strokeLinejoin="round" d="M20 5.00012C24 6.42174 23.3809 11.6087 22.0002 14.0001L10.0005 5.92177C11.0005 4.00013 16 3.5785 20 5.00012Z"/><path d="M26 35C34.2843 35 39 36.7909 39 39C39 41.2091 32.2843 43 24 43C15.7157 43 9 41.2091 9 39C9 38.4608 9.40006 37.9465 10.1253 37.4771"/></g>
</svg>
);Other libraries
Coconut Tree in 3 more libraries
Each library draws it its own way. Open one to compare.
IconPark
More like it
Icons that share its tags, in the same style.
Search IconPark
Skip the copy and paste. With Pro, your AI agent finds and installs any IconPark icon from a prompt.
Get ProTags
Browse by tag
Coconut Tree is tagged UI, multicolor, nature and 2 more. Related tags follow; each opens its icons from every library.
Pricing
IconPark MCP, with Pro
Ask for Coconut Tree or any of 2,658 IconPark icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the Coconut Tree icon means and where it's used, then how to install, style, label and license it.
The coconut tree icon represents a tropical tree commonly found in coastal areas, known for its versatile uses and cultural significance. It is a symbol used to convey a sense of paradise or exotic getaway.
In software applications, the coconut tree icon may appear in travel or tourism-related platforms, where users can explore and book trips to tropical destinations. For instance, a user might use the coconut tree icon to represent a section for tropical travel or cultural experiences.
From a UX perspective, the coconut tree icon communicates a sense of relaxation and escape. When users see this icon, they understand that they can expect to find features related to unwinding or exploring new cultures.
Coconut Tree is one of 2,658 icons in IconPark, made by ByteDance and released under Apache 2.0. It is drawn on a 48 × 48 grid.
Sign in (it's free), then open Get icon, Install with shadcn CLI, and pick your package manager to copy the command. It adds CoconutTreeIcon to components/icons/icon-park-coconut-tree.tsx: one file, a size prop (24 by default) and every SVG prop, with no icon package.
Copy it as React (from Get icon, or the Code section): a typed CoconutTreeIcon component you paste into your project, with no package to install. Only the icons you import reach your bundle. It works in Next.js and any React app.
Open Get icon, then Copy as code, and pick Vue, Svelte, Angular, Solid or Preact; the Code section shows each one too. Every version is one self-contained component with the SVG inside, and SVG and data URL copies are there for plain HTML and CSS.
With Pro, the shadcn.io MCP server lets Claude Code, Cursor or any MCP client find the Coconut Tree icon, or any of 2,658 IconPark icons, and install it from a prompt.
It's multicolor, so it keeps its own colors.
Set width and height on the component, or a class like size-6. It's drawn on a 48 × 48 grid, so it stays sharp at any size. Customize also sets the size it exports at, its padding and rotation.
Yes. It keeps its own colors in light and dark mode, so check it against both backgrounds. The icon is a vector, so it needs no separate dark asset.
Next to a visible label it's decoration: add aria-hidden="true" so screen readers skip it. Standing alone, as in an icon button, give the button a name instead, like aria-label="Coconut Tree", so screen readers say what it does.
Yes. CoconutTreeIcon passes every SVG prop to the svg element, so <CoconutTreeIcon aria-hidden="true" /> works, and so do role="img" with aria-label, or a title child, when it carries meaning on its own.
Yes. Open Get icon, then Download file: SVG for code or design tools like Figma; PNG, WebP or JPEG at 512px; or an ICO favicon with 16, 32 and 48px inside. Each one uses what you set in Customize.
Yes. Apache 2.0 allows commercial use; keep the license notice when you ship the icons' source files. The full terms are in the license, linked on this page.
No visible credit is required: Apache 2.0 only asks that you keep the license notice if you ship the icons' source files. Icons installed with the shadcn CLI already start with a comment naming IconPark, ByteDance and the license.
Yes. Copying and downloading it is free, and the shadcn CLI install only needs a free account.
3 other libraries draw an icon called Coconut Tree. The Other libraries section on this page shows each one, so you can compare them and open the one that fits your style.
Its tags are UI, multicolor, nature, tropical and paradise. Each tag page lists the icons that carry it from every library, which is the quickest way to find a match for Coconut Tree in another set.
4.9 out of 5 from 150+ developers
Install Coconut Tree from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.
Get Pro