Icons Management

Icons are used to:

• represent blocks in the blocks panel
• display on buttons within UI elements

To define an icon, you can use any image in SVG, PNG, or JPG format with dimensions of 24×24 pixels.

Stripo provides both a built-in set of SVG icons and the ability to add your own custom icons.

Build-in Icons

Icon Name	Preview
accordion
add-column-right
actual-size
add-colum-left
add-row-bottom
add-row-top
align-icon-to-left
add-comment
align-icon-to-right
align-icon-to-top
align-to-bottom
align-to-left
align-to-middle
align-to-center
align-to-right
align-to-top
amp
animal
appearance
arrow-bottom
apple
arrow-back
arrow-right
arrow-top
aspect-ratio-1-1
aspect-ratio-16-9
aspect-ratio-4-3
backward
ball
banner
beach
border-dashed
bitly
border-dotted
border-color
border-per-side
border-radius
border-solid
button
card
carousel
check-circle
calendar
border
chatgpt
check
chevron-down
circle
clean
code
clear
clock
combine-cell
cross-circle
cross
crop
comment
custom
data
delete-column
decrease-level
delete-row
delete
desktop
download
draw
drop-here
drop-here-big
emoji-2
emoji
duplicate
emptiness
equal
eye
export
fill
fit-to
font
flag
flip-v
folder
flip-h
frame
form
format
forward
gemini
height
grid
help
hide-desktop
hide-mobile
giphy
history
hint-image-button
html
image-editor
image
increase-level
inspect
info
lamp
invite-member
level-up
line-height-large
layers
line-height-large
line-height-small
line-height-medium
line-height-normal
list-dots
list
link
list-number
loader
logo-sign
lock-button-lines
lower-alpha
lock
mail-info
logout
menu
mail-template
magic
masonry
minus
modes
mobile
more
new-window
move
not-found
options
plus
popover-corner
plane
modules
preview
powered_by_stripo
powered_by_stripo copy
radius-corner-viewer-bottom
redo
radius-corner-viewer-right
radius-corner-viewer-left
regexp
radius-corner-viewer-top
reorder
rename
required
replace
restore
rotate
save-big
save
search
selector
social
shape
spacer-line
spacer-space
stability
spacer
square
symbol
star
stripe
tag
text-bgcolor
text-center
table
text-bold
text-h1
text-color
text-h2
text-italic
text-left
text-special
text-right
text-h3
text-h6
text-strike
text-sup
text-underline
text-unformat
translate
text
timer
text-sub
upload
undo
unlock
user-profile
upper-alpha
video
width
text-h5
text-h4
unlink
warning
text-p
condition
mime-type
sync
format-code
focus

To use a built-in icon, simply specify its name in the getIcon() method:

getIcon() {
    return 'new-window';
}

Adding Custom Icons

There are several methods to add custom icons:

1. Using IconsRegistry (Recommended)

This approach is recommended for block icons, especially when blocks appear as quick-add options in empty containers. Icons registered through IconsRegistry automatically adapt their colors to match the current theme and harmonize with other UI elements. Only SVG format is supported.

//-----------MyIconsRegistry.js--------------
import {IconsRegistry} from '@stripoinc/ui-editor-extensions';
import blockIcon from './icons/block.svg?raw';
import horizontal from './icons/horizontal.svg?raw';
import vertical from './icons/vertical.svg?raw';

export class MyIconsRegistry extends IconsRegistry {
    registerIconsSvg(iconsMap) {
        iconsMap['my-block'] = blockIcon;
        iconsMap['horizontal'] = horizontal;
        iconsMap['vertical'] = vertical;
    }
}

//-----------SimpleBlock.js--------------
import {Block} from '@stripoinc/ui-editor-extensions';

class SimpleBlock extends Block {
    getIcon() {
        return 'my-block';
    }

    // Other block configuration...
}

//-----------MyExtension.js--------------
import {ExtensionBuilder} from '@stripoinc/ui-editor-extensions';
import {SimpleBlock} from './blocks/SimpleBlock';
import {MyIconsRegistry} from './blocks/MyIconsRegistry';

export default new ExtensionBuilder()
    .addBlock(SimpleBlock)
    .withIconsRegistry(MyIconsRegistry)
    .build();

2. External URL

You can reference an external image URL:

import {Block} from '@stripoinc/ui-editor-extensions';

class SimpleBlock extends Block {
    getIcon() {
        return 'https://your.domain/icons/block.png';
    }

    // Other block configuration...
}

3. Static Asset Import

You can import icon files directly as static assets:

import {Block} from '@stripoinc/ui-editor-extensions';
import blockIcon from './icons/block.svg';

class SimpleBlock extends Block {
    getIcon() {
        return blockIcon;
    }

    // Other block configuration...
}