Icon

Render symbols for representing actions, objects, or concepts

Use the Icon component to create intuitive, visually appealing, and user-friendly interfaces, enhancing both functionality and design. Most icons are provided by the open source MynaUI Icons, along with some custom icons. Sizes are set to 24x24px by default.

---
import { Icon } from 'webcoreui/astro'
---

<Icon type="github" />

<script>
    import { Icon } from 'webcoreui/svelte'
</script>

<Icon type="github" />

import React from 'react'
import { Icon } from 'webcoreui/react'

const Component = () => <Icon type="github" />

export default Component

Sizes and Colors

You can specify custom icon sizes and colors using the size and color props respectively:

<Icon type="github" size={12} color="#32e3a0" />
<Icon type="github" size={16} color="#32cae3" />
<Icon type="github" size={20} color="#ad74f7" />
<Icon type="github" size={24} color="#ff89aa" />
<Icon type="github" size={30} color="#f2c262" />

Available Icons

The following icons are available in Webcore out of the box (hover the icon to see its type):

Importing as String

Using the Icon component is the preferred way to render SVG icons provided by Webcore on the server. However, when using the Icon component on the client, it can drastically increase your bundle size as it prebundles all icons.

If you want to import icons provided by Webcore on the client-side, it’s recommended to import them directly as strings using the following imports:

import { info } from 'webcoreui/icons'

This can be useful in cases where you cannot use a component. In this case, the value of info will be an SVG string that you can use to dynamically render the icon.

API

type IconProps = {
    type: string
    size?: number
    color?: string
}