Elemental Ui
The elemental-ui icon represents a design system and UI library used in software development.
Exports at 27 × 24 px
Code
Elemental Ui in your framework
In any framework. Customize it above, and the code follows.
export const ElementalUiIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="24" viewBox="0 0 256 229" {...props}>
<path fill="#EBF8F9" d="M128 165.548c5.859 0 11.718-.154 17.506-.461c-5.696 7.669-11.555 14.753-17.506 21.161c-5.953-6.408-11.81-13.492-17.504-21.161c5.786.307 11.644.461 17.504.461m-51.487 53.714c-3.048 0-5.771-.656-8.099-2c-11.183-6.457-13.153-28.73-5.355-58.609c11.184 2.583 23.247 4.465 35.952 5.612c7.343 10.428 15.006 19.934 22.838 28.33c-17.403 17.178-33.736 26.667-45.336 26.667m102.977-.003c-11.599 0-27.935-9.486-45.338-26.664c7.828-8.393 15.492-17.896 22.834-28.322l.014-.008c12.701-1.147 24.762-3.029 35.943-5.612c7.795 29.879 5.827 52.152-5.357 58.609c-2.328 1.343-5.047 1.997-8.096 1.997m-16.047-64.529a330 330 0 0 0 9.152-14.928a329 329 0 0 0 8.35-15.388c3.796 8.765 7.003 17.38 9.575 25.739c-8.523 1.948-17.586 3.48-27.077 4.577m-70.885 0c-9.49-1.097-18.555-2.629-27.078-4.577c2.573-8.359 5.779-16.974 9.575-25.742a331 331 0 0 0 17.503 30.319m-35.651-6.732c-29.775-8.187-48.079-21.029-48.079-33.943c0-12.912 18.304-25.756 48.079-33.942c3.356 10.979 7.757 22.369 13.116 33.942c-5.359 11.575-9.76 22.963-13.116 33.943m142.185 0c-3.354-10.977-7.756-22.368-13.115-33.943c5.359-11.575 9.761-22.964 13.115-33.942c29.776 8.185 48.08 21.028 48.08 33.942s-18.304 25.756-48.08 33.943M75.055 103.697c-3.796-8.764-7.002-17.38-9.575-25.738c8.523-1.95 17.588-3.483 27.078-4.578a328 328 0 0 0-9.153 14.927a329 329 0 0 0-8.35 15.389m105.89 0a331 331 0 0 0-17.502-30.316c9.491 1.095 18.554 2.628 27.077 4.578c-2.572 8.356-5.779 16.971-9.575 25.738m-52.947 53.022a318 318 0 0 1-24.107-.905a318 318 0 0 1-12.842-20.426a318 318 0 0 1-11.267-21.333a318 318 0 0 1 11.267-21.333a317 317 0 0 1 12.842-20.426A318 318 0 0 1 128 71.391c8.106 0 16.213.302 24.112.905a319 319 0 0 1 12.839 20.426a317 317 0 0 1 11.267 21.333a317 317 0 0 1-11.267 21.333a319 319 0 0 1-12.839 20.426c-7.902.603-16.009.905-24.114.905m-17.502-93.696c5.694-7.669 11.553-14.752 17.504-21.159c5.951 6.405 11.81 13.49 17.506 21.159a331 331 0 0 0-35.01 0m-47.437 6.434c-7.798-29.879-5.828-52.152 5.355-58.609c2.327-1.343 5.049-1.998 8.097-1.998c11.598 0 27.934 9.488 45.337 26.666c-7.828 8.393-15.49 17.897-22.832 28.321l-.015.008c-12.701 1.147-24.761 3.03-35.942 5.612m129.884 0c-11.184-2.583-23.248-4.467-35.952-5.612c-7.344-10.429-15.008-19.935-22.839-28.329c17.405-17.18 33.737-26.668 45.336-26.668c3.048 0 5.77.656 8.098 2c11.184 6.457 13.152 28.73 5.357 58.609M179.493 0c-14.175.001-32.128 10.066-51.46 29.15l-.033-.035l-.033.035C108.632 10.063 90.681.002 76.505.002C71.914.002 67.717 1.058 64 3.204c-15.197 8.774-18.598 33.568-9.514 68.368l-.046.012l.013.047C19.771 81.164 0 96.506 0 114.055s19.771 32.891 54.453 42.425l-.013.046l.046.012c-9.084 34.802-5.683 59.595 9.514 68.368c3.717 2.145 7.91 3.199 12.501 3.199c14.174 0 32.13-10.057 51.464-29.142l.035.034l.033-.034c19.338 19.086 37.286 29.147 51.464 29.147c4.589-.003 8.785-1.058 12.503-3.204c15.195-8.773 18.598-33.566 9.514-68.368l.046-.012l-.011-.046C236.227 146.946 256 131.604 256 114.055s-19.773-32.891-54.451-42.424l.011-.047l-.046-.012c9.084-34.801 5.681-59.594-9.514-68.368c-3.719-2.148-7.913-3.205-12.507-3.204"/><path fill="#31ADB8" d="M185.101 112.174a326 326 0 0 0-12.506-23.866a326 326 0 0 0-14.414-22.762l-1.187-1.708l-2.072-.172c-17.597-1.464-36.252-1.464-53.842 0l-2.073.172l-1.187 1.708a326 326 0 0 0-14.415 22.762a325 325 0 0 0-12.503 23.866l-.886 1.881l.886 1.882a325 325 0 0 0 12.503 23.865a326 326 0 0 0 14.415 22.762l1.187 1.709l2.073.173a326 326 0 0 0 26.92 1.103c9.066 0 18.124-.37 26.922-1.103l2.072-.173l1.187-1.709a326 326 0 0 0 14.414-22.762a326 326 0 0 0 12.506-23.865l.885-1.882z"/><path fill="#FFF" d="M145.091 97.942v-8.898h-34.746v50.282h35.381v-8.899h-24.999v-12.288h22.739v-8.827h-22.739v-11.37z"/>
</svg>
);SVG Logos
More like it
Icons that share its tags, in the same style.
Search SVG Logos
Skip the copy and paste. With Pro, your AI agent finds and installs any SVG Logos icon from a prompt.
Get ProTags
Browse by tag
Elemental Ui is tagged interface, web development, software development and 2 more. Related tags follow; each opens its icons from every library.
Pricing
SVG Logos MCP, with Pro
Ask for Elemental Ui or any of 2,063 SVG Logos 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 Elemental Ui icon means and where it's used, then how to install, style, label and license it.
The elemental-ui icon represents a design system and UI library used in software development. It is associated with the Elemental UI framework, which provides a set of pre-built UI components for building web applications. The icon signifies a collection of reusable UI elements that help developers create consistent and visually appealing interfaces.
In real-world applications, the elemental-ui icon appears in software development tools and platforms that utilize the Elemental UI framework. For instance, it may be used in coding environments, design systems, and web development projects that rely on Elemental UI for building user interfaces.
From a UX perspective, the elemental-ui icon communicates a sense of consistency and standardization in software development. It helps users understand that the UI components used in an application are part of a larger design system, which ensures a cohesive and intuitive user experience.
Elemental Ui is one of 2,063 icons in SVG Logos, made by Gil Barbara and released under CC0. It is drawn on a 256 × 229 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 ElementalUiIcon to components/icons/logos-elemental-ui.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 ElementalUiIcon 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 Elemental Ui icon, or any of 2,063 SVG Logos 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 256 × 229 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="Elemental Ui", so screen readers say what it does.
Yes. ElementalUiIcon passes every SVG prop to the svg element, so <ElementalUiIcon 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.
CC0 puts the icons in the public domain: use them anywhere, with no conditions. The full terms are in the license, linked on this page.
No. CC0 gives the icons to the public domain, so no credit and no notice is required. Icons installed with the shadcn CLI still start with a comment naming SVG Logos, Gil Barbara and the license.
Yes. Copying and downloading it is free, and the shadcn CLI install only needs a free account.
Its tags are interface, web development, software development, frontend and design-system. Each tag page lists the icons that carry it from every library, which is the quickest way to find a match for Elemental Ui in another set.
4.9 out of 5 from 150+ developers
Install Elemental Ui from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.
Get Pro