Icons - Vanilla JS | IMG.LY Docs

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#

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.

Examples#

Register an Icon Set#

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

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:

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:

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