CESDK/CE.SDK/Web Editor/Customization/API Reference

Adding Icons

Explore how to add new icons in the editor.

Using our API, you can register your own icon sets for usage within the CE.SDK editor. The API is as follows:

Add new Icon Set#

JavaScript


cesdk.ui.addIconSet(id: string, svgSprite: string)

The icon set is a string containing a SVG sprite with symbols. The id of each symbol is used to reference the icon in the editor. These ids need to start with a @ to be recognized in the editor.

Please Note: The SVG sprite will be injected into the (shadow) DOM without any sanitization. Make sure to only use trusted sources to prevent e.g. XSS attacks. If you are unsure about the source of the sprite, consider using libraries like DOMPurify to sanitize the SVG string before adding it.

Examples#

Register an Icon Set#

Registering an SVG string with a single symbol might look like this:

JavaScript


cesdk.ui.addIconSet(
  '@imgly/custom',
  `
    <svg>
      <symbol
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        id="@some/icon/ZoomIn"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M3 7.5C3 5.01472 5.01472 3 7.5 3C9.98528 3 12 5.01472 12 7.5C12 9.98528 9.98528 12 7.5 12C5.01472 12 3 9.98528 3 7.5ZM7.5 2C4.46243 2 2 4.46243 2 7.5C2 10.5376 4.46243 13 7.5 13C8.74835 13 9.89957 12.5841 10.8226 11.8833L10.9697 12.0303L12.4697 13.5303L13 14.0607L14.0607 13L13.5303 12.4697L12.0303 10.9697L11.8833 10.8226C12.5841 9.89957 13 8.74835 13 7.5C13 4.46243 10.5376 2 7.5 2ZM7 7V5H8V7H10V8H8V10H7V8H5V7H7Z"
          fill="currentColor"
          fillOpacity="0.9"
        />
      </symbol>
    </svg>
  `
);

Replace a Dock Icon#

You could use your custom icon set to replace the "Image" icon of the default Dock:

JavaScript


cesdk.ui.setDockOrder(
  cesdk.ui.getDockOrder().map((entry) => {
    if (entry.key === 'ly.img.image')
      return {
        ...entry,
        icon: '@some/icon/ZoomIn' // Note the ID referencing the SVG symbol
      };
    else return entry;
  })
);

Use within a custom Component#

Using your new symbol in a custom component is then done by referencing the symbol ID directly:

JavaScript


cesdk.ui.registerComponent('CustomIcon', ({ builder: { Button } }) => {
  Button('customIcon', {
    label: 'Custom Icon',
    icon: '@some/icon/ZoomIn', // Note the ID referencing the SVG symbol
    onClick: () => {
      console.log('Custom Icon clicked');
    }
  });
});

Built-In Icons#

These built-in icons can be referenced by their name string directly:

Set 'Essentials'#

Name	Icon
Name `@imgly/Adjustments`	Icon
Name `@imgly/Animation`	Icon
Name `@imgly/Appearance`	Icon
Name `@imgly/Apps`	Icon
Name `@imgly/ArrowDown`	Icon
Name `@imgly/ArrowLeft`	Icon
Name `@imgly/ArrowRight`	Icon
Name `@imgly/ArrowUp`	Icon
Name `@imgly/ArrowsDirectionHorizontal`	Icon
Name `@imgly/ArrowsDirectionVertical`	Icon
Name `@imgly/AsClip`	Icon
Name `@imgly/AsOverlay`	Icon
Name `@imgly/Audio`	Icon
Name `@imgly/AudioAdd`	Icon
Name `@imgly/Backward`	Icon
Name `@imgly/Blendmode`	Icon
Name `@imgly/Blur`	Icon
Name `@imgly/BooleanExclude`	Icon
Name `@imgly/BooleanIntersect`	Icon
Name `@imgly/BooleanSubstract`	Icon
Name `@imgly/BooleanUnion`	Icon
Name `@imgly/CaseAsTyped`	Icon
Name `@imgly/CaseLowercase`	Icon
Name `@imgly/CaseSmallCaps`	Icon
Name `@imgly/CaseTitleCase`	Icon
Name `@imgly/CaseUppercase`	Icon
Name `@imgly/CheckboxCheckmark`	Icon
Name `@imgly/CheckboxMixed`	Icon
Name `@imgly/Checkmark`	Icon
Name `@imgly/ChevronDown`	Icon
Name `@imgly/ChevronLeft`	Icon
Name `@imgly/ChevronRight`	Icon
Name `@imgly/ChevronUp`	Icon
Name `@imgly/Collage`	Icon
Name `@imgly/ColorFill`	Icon
Name `@imgly/ColorGradientAngular`	Icon
Name `@imgly/ColorGradientLinear`	Icon
Name `@imgly/ColorGradientRadial`	Icon
Name `@imgly/ColorOpacity`	Icon
Name `@imgly/ColorSolid`	Icon
Name `@imgly/ConnectionLostSlash`	Icon
Name `@imgly/Copy`	Icon
Name `@imgly/CornerJoinBevel`	Icon
Name `@imgly/CornerJoinMiter`	Icon
Name `@imgly/CornerJoinRound`	Icon
Name `@imgly/Crop`	Icon
Name `@imgly/CropCoverMode`	Icon
Name `@imgly/CropCropMode`	Icon
Name `@imgly/CropFitMode`	Icon
Name `@imgly/CropFreefromMode`	Icon
Name `@imgly/Cross`	Icon
Name `@imgly/CrossRoundSolid`	Icon
Name `@imgly/CustomLibrary`	Icon
Name `@imgly/Download`	Icon
Name `@imgly/DropShadow`	Icon
Name `@imgly/Duplicate`	Icon
Name `@imgly/Edit`	Icon
Name `@imgly/Effects`	Icon
Name `@imgly/ExternalLink`	Icon
Name `@imgly/EyeClosed`	Icon
Name `@imgly/EyeOpen`	Icon
Name `@imgly/Filter`	Icon
Name `@imgly/FlipHorizontal`	Icon
Name `@imgly/FlipVertical`	Icon
Name `@imgly/FontAutoSizing`	Icon
Name `@imgly/FontSize`	Icon
Name `@imgly/Forward`	Icon
Name `@imgly/FullscreenEnter`	Icon
Name `@imgly/FullscreenLeave`	Icon
Name `@imgly/Group`	Icon
Name `@imgly/GroupEnter`	Icon
Name `@imgly/GroupExit`	Icon
Name `@imgly/Home`	Icon
Name `@imgly/Image`	Icon
Name `@imgly/Info`	Icon
Name `@imgly/LayerBringForward`	Icon
Name `@imgly/LayerBringForwardArrow`	Icon
Name `@imgly/LayerBringToFront`	Icon
Name `@imgly/LayerBringToFrontArrow`	Icon
Name `@imgly/LayerSendBackward`	Icon
Name `@imgly/LayerSendBackwardArrow`	Icon
Name `@imgly/LayerSendToBack`	Icon
Name `@imgly/LayerSendToBackArrow`	Icon
Name `@imgly/LayoutHorizontal`	Icon
Name `@imgly/LayoutVertical`	Icon
Name `@imgly/Library`	Icon
Name `@imgly/LineHeight`	Icon
Name `@imgly/LinkClosed`	Icon
Name `@imgly/LinkOpen`	Icon
Name `@imgly/LoadingSpinner`	Icon
Name `@imgly/LockClosed`	Icon
Name `@imgly/LockOpen`	Icon
Name `@imgly/Minus`	Icon
Name `@imgly/MoreOptionsHorizontal`	Icon
Name `@imgly/MoreOptionsVertical`	Icon
Name `@imgly/Move`	Icon
Name `@imgly/Next`	Icon
Name `@imgly/None`	Icon
Name `@imgly/ObjectAlignBottom`	Icon
Name `@imgly/ObjectAlignDistributedHorizontal`	Icon
Name `@imgly/ObjectAlignDistributedVertical`	Icon
Name `@imgly/ObjectAlignHorizontalCenter`	Icon
Name `@imgly/ObjectAlignLeft`	Icon
Name `@imgly/ObjectAlignRight`	Icon
Name `@imgly/ObjectAlignTop`	Icon
Name `@imgly/ObjectAlignVerticalCenter`	Icon
Name `@imgly/OrientationToggleLandscape`	Icon
Name `@imgly/OrientationTogglePortrait`	Icon
Name `@imgly/PageResize`	Icon
Name `@imgly/Paste`	Icon
Name `@imgly/Pause`	Icon
Name `@imgly/PlaceholderConnected`	Icon
Name `@imgly/PlaceholderStripes`	Icon
Name `@imgly/Play`	Icon
Name `@imgly/Plus`	Icon
Name `@imgly/Position`	Icon
Name `@imgly/Previous`	Icon
Name `@imgly/Redo`	Icon
Name `@imgly/Rename`	Icon
Name `@imgly/Reorder`	Icon
Name `@imgly/Repeat`	Icon
Name `@imgly/RepeatOff`	Icon
Name `@imgly/Replace`	Icon
Name `@imgly/Reset`	Icon
Name `@imgly/RotateCCW90`	Icon
Name `@imgly/RotateCW`	Icon
Name `@imgly/RotateCW90`	Icon
Name `@imgly/Save`	Icon
Name `@imgly/Scale`	Icon
Name `@imgly/Search`	Icon
Name `@imgly/Settings`	Icon
Name `@imgly/SettingsCog`	Icon
Name `@imgly/ShapeOval`	Icon
Name `@imgly/ShapePolygon`	Icon
Name `@imgly/ShapeRectangle`	Icon
Name `@imgly/ShapeStar`	Icon
Name `@imgly/Shapes`	Icon
Name `@imgly/Share`	Icon
Name `@imgly/SidebarOpen`	Icon
Name `@imgly/Split`	Icon
Name `@imgly/Sticker`	Icon
Name `@imgly/Stop`	Icon
Name `@imgly/Straighten`	Icon
Name `@imgly/StrokeDash`	Icon
Name `@imgly/StrokeDotted`	Icon
Name `@imgly/StrokePositionCenter`	Icon
Name `@imgly/StrokePositionInside`	Icon
Name `@imgly/StrokePositionOutside`	Icon
Name `@imgly/StrokeSolid`	Icon
Name `@imgly/StrokeWeight`	Icon
Name `@imgly/Template`	Icon
Name `@imgly/Text`	Icon
Name `@imgly/TextAlignBottom`	Icon
Name `@imgly/TextAlignCenter`	Icon
Name `@imgly/TextAlignLeft`	Icon
Name `@imgly/TextAlignMiddle`	Icon
Name `@imgly/TextAlignRight`	Icon
Name `@imgly/TextAlignTop`	Icon
Name `@imgly/TextAutoHeight`	Icon
Name `@imgly/TextAutoSize`	Icon
Name `@imgly/TextBold`	Icon
Name `@imgly/TextFixedSize`	Icon
Name `@imgly/TextItalic`	Icon
Name `@imgly/Timeline`	Icon
Name `@imgly/ToggleIconOff`	Icon
Name `@imgly/ToggleIconOn`	Icon
Name `@imgly/TransformSection`	Icon
Name `@imgly/TrashBin`	Icon
Name `@imgly/TriangleDown`	Icon
Name `@imgly/TriangleUp`	Icon
Name `@imgly/TrimMedia`	Icon
Name `@imgly/Typeface`	Icon
Name `@imgly/Undo`	Icon
Name `@imgly/Ungroup`	Icon
Name `@imgly/Upload`	Icon
Name `@imgly/Video`	Icon
Name `@imgly/VideoCamera`	Icon
Name `@imgly/Volume`	Icon
Name `@imgly/VolumeMute`	Icon
Name `@imgly/ZoomIn`	Icon
Name `@imgly/ZoomOut`	Icon