Use custom icons
Stay organized with collections
Save and categorize content based on your preferences.
To use a custom icon, call addIcon
or getIcon
on a block.
Add an icon
To add a custom icon to a block, pass the block to the icon's constructor and
call addIcon
on the block. For example, you might want to do this when
initializing the block or in response to an event.
JSON
// Use an extension to add a custom icon during initialization.
Blockly.Extensions.register("addMyIcon", function () {
this.addIcon(new MyIcon(this));
})
Blockly.common.defineBlocksWithJsonArray([
{
type: "my_block",
// ...
extensions: ["addMyIcon"],
},
])
JavaScript
// Add a custom icon during initialization.
Blockly.Blocks['my_block'] = {
init: function() {
//...
this.addIcon(new MyIcon(this));
},
}
Get an icon
To get a custom icon from a block, call getIcon
and pass the icon's type
string.
const myIcon = myBlock.getIcon('my_icon');
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-04-14 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-04-14 UTC."],[],[],null,["# Use custom icons\n\nTo use a custom icon, call `addIcon` or `getIcon` on a block.\n\nAdd an icon\n-----------\n\nTo add a custom icon to a block, pass the block to the icon's constructor and\ncall `addIcon` on the block. For example, you might want to do this when\ninitializing the block or in response to an event. \n\n### JSON\n\n // Use an extension to add a custom icon during initialization.\n Blockly.Extensions.register(\"addMyIcon\", function () {\n this.addIcon(new MyIcon(this));\n })\n\n Blockly.common.defineBlocksWithJsonArray([\n {\n type: \"my_block\",\n // ...\n extensions: [\"addMyIcon\"],\n },\n ])\n\n### JavaScript\n\n // Add a custom icon during initialization.\n Blockly.Blocks['my_block'] = {\n init: function() {\n //...\n this.addIcon(new MyIcon(this));\n },\n }\n\nGet an icon\n-----------\n\nTo get a custom icon from a block, call `getIcon` and pass the [icon's type\nstring](/blockly/guides/create-custom-blocks/icons/creating-custom-icons/basic-implementation#specify_the_icons_type). \n\n const myIcon = myBlock.getIcon('my_icon');"]]