Icons
Stay organized with collections
Save and categorize content based on your preferences.
Icons are used to define certain UI elements that show or define "meta"
information about a block. Usually this means they act as a clickable button
that opens a pop up with more information or an editor.
→ More info on Fields vs Icons.
Blockly provides some built-in icons that fulfill common use cases, like adding
comments or warnings to blocks. You can check out the reference
documentation for more information about those.
Blockly also lets you define your own custom icons if the built-in ones don't
serve your use case. For example, you might want an icon that displays version
or copyright information in a pop-up bubble.
→ More info on Creating custom icons.
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."],[[["\u003cp\u003eIcons represent UI elements displaying "meta" information about a block, often acting as clickable buttons for pop-ups or editors.\u003c/p\u003e\n"],["\u003cp\u003eBlockly offers pre-built icons for common functions like comments and warnings, documented in the reference materials.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can create custom icons to extend beyond Blockly's default options, with implementation guidance available in a separate guide.\u003c/p\u003e\n"]]],["Icons in Blockly are UI elements that display \"meta\" information about blocks, often functioning as clickable buttons to reveal pop-ups or editors. Blockly includes pre-built icons for common functions like comments and warnings, detailed in the reference documentation. Users can also create custom icons to suit specific needs beyond the built-in options. Further details on built in and custom icons are available in the provided guides.\n"],null,["Icons are used to define certain UI elements that show or define \"meta\"\ninformation about a block. Usually this means they act as a clickable button\nthat opens a pop up with more information or an editor.\n\n→ More info on [Fields vs Icons](/blockly/guides/create-custom-blocks/fields/fields-vs-icons).\n\nBlockly provides some built-in icons that fulfill common use cases, like adding\ncomments or warnings to blocks. You can check out the [reference\ndocumentation](/blockly/reference/js/blockly.icons_namespace) for more information about those.\n\nBlockly also lets you define your own custom icons if the built-in ones don't\nserve your use case. For example, you might want an icon that displays version\nor copyright information in a pop-up bubble.\n\n→ More info on [Creating custom icons](/blockly/guides/create-custom-blocks/icons/creating-custom-icons/basic-implementation)."]]
