heroicons field

Add a custom field to select heroicons in Strapi.

Install now

Strapi heroicons field plugin

Plugin for adding heroicons to Strapi.

Key Features • How To Use • Credits • License

screenshot

Key Features

Icon picker - custom field to use in your content types
- Change between outline, solid and mini icons
- Search for icons
Dark/Light mode
Supports advanced setting 'required'
Don't need to install any frontend library - it returns the SVG code of the icon and the name as a stringyfied JSON
Supports all the icons from the Hero Icons library

How To Use

In Strapi

To install this plugin, you'll need to be in the folder of your strapi application. Then, from your command line:

# using npm
$ npm i strapi-plugin-heroicons-field

# using yarn
$ yarn add strapi-plugin-heroicons-field

# rebuild admin panel
$ yarn strapi build

Then, you'll need to restart your server. After that, you just need to add a new custom field to your content types with the type Icon.

In your frontend

The plugin returns the icon as a stringyfied JSON, so you can use it as you want. Here's an example of how to use it in svelte:

1<script>
2	export let iconData;
3
4	let svg;
5	try {
6		svg = JSON.parse(iconData).component;
7	} catch (error) {
8		svg = null;
9	}
10</script>
11
12{#if svg}
13	<div class="w-6 h-6">
14		{@html svg}
15	</div>
16{/if}