Search
Loading...
Skip to content

Icons

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’#

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