--- url: https://plugin.stripo.email/extensions/features/icons-management.md --- # 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: ```javascript 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. ```javascript //-----------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: ```javascript 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: ```javascript import {Block} from '@stripoinc/ui-editor-extensions'; import blockIcon from './icons/block.svg'; class SimpleBlock extends Block { getIcon() { return blockIcon; } // Other block configuration... } ```