Skip to content

Icons

Kubrick UI does not come with its own icon library. Although you can use any icon library you prefer, we recommend using the @wordpress/icons or Dashicons to make your WordPress admin app remains consistent with the WordPress admin interface.

Using `@wordpress/icons`

First, install @wordpress/icons package as the app dependency:

npm i @wordpress/icons

yarn add @wordpress/icons

pnpm add @wordpress/icons

Then, import the Icon component and the icon you want to use.

import { Button } from '@syntatis/kubrick';
import { Icon, download } from '@wordpress/icons';

function App () {
  return (
    <Button suffix={<Icon icon={download} />}>
      Download
    </Button>
  );
}

Using Dashicons

The Dashicons is already included into the WordPress admin interface. You can use them in your WordPress admin app simply by adding the Dashicons class to the span element, for example:

<Button suffix={<span class="dashicons dashicons-admin-settings" />}>
  Save Settings
</Button>