{"id":2054,"date":"2026-10-14T04:33:41","date_gmt":"2026-10-14T04:33:41","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2054"},"modified":"2026-10-15T08:53:09","modified_gmt":"2026-10-15T08:53:09","password":"","slug":"icon-list","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/icon-list\/","title":{"rendered":"Icon List"},"content":{"rendered":"\n

The Icon List Block lets you display a list of items with optional icons and text. You can add, edit, duplicate, remove, and reorder list items. Customize the list layout, alignment, icon position, spacing, colors, typography, and dividers to match your design.<\/p>\n\n\n\n

How to Add an Icon List Block<\/h2>\n\n\n\n

Follow these steps to add and configure the Icon List Block in the WordPress Gutenberg editor.<\/p>\n\n\n\n

Step 1: Add the Icon List Block<\/h3>\n\n\n\n
    \n
  1. Open the page or post where you want to add the Icon List Block.<\/li>\n\n\n\n
  2. Click the + (Add Block)<\/strong> button in the Gutenberg editor.<\/li>\n\n\n\n
  3. Search for Icon List<\/strong> in the block inserter.<\/li>\n\n\n\n
  4. Select the Icon List<\/strong> block from the ShapeBlock category.<\/li>\n\n\n\n
  5. The Icon List block will be added to your page with default list items.<\/li>\n\n\n\n
  6. Select the block to configure its settings using the sidebar.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 2: Configure the Icon List Block<\/h3>\n\n\n\n

    Select the Icon List Block to access its configuration options in the sidebar. The available options are organized into four tabs:<\/p>\n\n\n\n

      \n
    • Settings:<\/strong> Add and manage list items, choose icons, edit item text, and show or hide icons.<\/li>\n\n\n\n
    • Layout:<\/strong> Choose the list layout, alignment, spacing between items, icon position, and vertical alignment.<\/li>\n\n\n\n
    • Style:<\/strong> Customize dividers, icon size, icon spacing, icon colors, text colors, and typography.<\/li>\n\n\n\n
    • Advanced:<\/strong> Configure padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n

      Settings Tab<\/h2>\n\n\n\n

      The Settings tab contains the Add List panel for managing the items displayed in the Icon List Block.<\/p>\n\n\n\n

      1. Add List<\/h3>\n\n\n\n
        \n
      • List Items:<\/strong> Each list item appears as a collapsible item that you can expand to edit.\n
          \n
        • Icon:<\/strong> Select an icon for the list item. This option is available when icons are enabled.<\/li>\n\n\n\n
        • Text:<\/strong> Enter the text displayed beside the icon. You can also edit the text directly in the block preview.<\/li>\n\n\n\n
        • Move Up:<\/strong> Move the list item one position upward.<\/li>\n\n\n\n
        • Move Down:<\/strong> Move the list item one position downward.<\/li>\n\n\n\n
        • Duplicate:<\/strong> Create a copy of the selected list item.<\/li>\n\n\n\n
        • Remove:<\/strong> Delete the selected list item.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Add Item:<\/strong> Add a new list item to the list.<\/li>\n\n\n\n
        • Icon:<\/strong> Enable or disable icons for all list items.<\/li>\n<\/ul>\n\n\n\n
          \"\"<\/figure>\n\n\n\n

          Layout Tab<\/h2>\n\n\n\n

          The Layout tab contains the List Layout and Icon Position panels for controlling the arrangement and alignment of list items.<\/p>\n\n\n\n

          1. List Layout<\/h3>\n\n\n\n
            \n
          • Layout:<\/strong> Choose how the list items are displayed:\n
              \n
            • Default: Display list items vertically, one below another.<\/li>\n\n\n\n
            • Inline: Display list items horizontally in a row.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • Alignment:<\/strong> Set the alignment of the list:\n
                \n
              • Left<\/li>\n\n\n\n
              • Center<\/li>\n\n\n\n
              • Right<\/li>\n<\/ul>\n<\/li>\n\n\n\n
              • Space Between (px):<\/strong> Adjust the spacing between list items. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n

                2. Icon Position<\/h3>\n\n\n\n

                This panel appears when icons are enabled.<\/p>\n\n\n\n

                  \n
                • Icon Position:<\/strong> Choose where the icon appears relative to the text:\n
                    \n
                  • Left<\/li>\n\n\n\n
                  • Right<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                  • Vertical Alignment:<\/strong> Set the vertical alignment of the icon:\n
                      \n
                    • Top<\/li>\n\n\n\n
                    • Middle<\/li>\n\n\n\n
                    • Bottom<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                    • Adjust Vertical Position (px):<\/strong> Move the icon vertically to fine-tune its position. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n
                      \"\"<\/figure>\n\n\n\n

                      Style Tab<\/h2>\n\n\n\n

                      The Style tab contains the List, Icon, and Text panels for customizing the appearance of the Icon List Block.<\/p>\n\n\n\n

                      1. List<\/h3>\n\n\n\n
                        \n
                      • Divider:<\/strong> Enable or disable dividers between list items.<\/li>\n\n\n\n
                      • Divider Color:<\/strong> Set the divider color or gradient. This option appears when Divider is enabled.<\/li>\n<\/ul>\n\n\n\n

                        2. Icon<\/h3>\n\n\n\n

                        This panel appears when icons are enabled.<\/p>\n\n\n\n

                          \n
                        • Size (px):<\/strong> Adjust the size of the icons. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n
                        • Gap (px):<\/strong> Adjust the spacing between each icon and its text. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n
                        • Color:<\/strong> Set the default icon color.<\/li>\n\n\n\n
                        • Hover Color:<\/strong> Set the icon color when a user hovers over it.<\/li>\n<\/ul>\n\n\n\n

                          3. Text<\/h3>\n\n\n\n
                            \n
                          • Color:<\/strong> Set the text color of the list items.<\/li>\n\n\n\n
                          • Typography:<\/strong> Customize the list text typography. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n
                            \"\"<\/figure>\n\n\n\n

                            Advanced Tab<\/h2>\n\n\n\n

                            The Advanced tab contains the Spacing and Background panels for controlling the outer spacing and background of the entire Icon List Block.<\/p>\n\n\n\n

                            1. Spacing<\/h3>\n\n\n\n
                              \n
                            • Padding:<\/strong> Set the inner spacing around the entire Icon List Block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n
                            • Margin:<\/strong> Set the outer spacing around the entire Icon List Block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n

                              2. Background<\/h3>\n\n\n\n
                                \n
                              • Background:<\/strong> Set a background color or gradient for the entire Icon List Block.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                                The Icon List Block lets you display a list of items with optional icons and text. You can add, edit, duplicate, remove, and reorder list items. Customize the list layout, alignment, icon position, spacing, colors, typography, and dividers to match your design. How to Add an Icon List Block Follow these steps to add and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16],"doc_tag":[],"class_list":["post-2054","docs","type-docs","status-publish","hentry","doc_category-content-block"],"year_month":"2026-10","word_count":679,"total_views":"9","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2054"}],"version-history":[{"count":2,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2054\/revisions"}],"predecessor-version":[{"id":2292,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2054\/revisions\/2292"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2054"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2054"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}