{"id":681,"date":"2022-11-01T09:41:31","date_gmt":"2022-11-01T09:41:31","guid":{"rendered":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/?post_type=docs&p=681"},"modified":"2022-11-01T10:16:30","modified_gmt":"2022-11-01T10:16:30","password":"","slug":"icon-list","status":"publish","type":"docs","link":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/docs\/icon-list\/","title":{"rendered":"Icon List Block"},"content":{"rendered":"\n

The Icon List Gutenberg Block is a great way to display a list of items with icons.<\/p>\n\n\n\n

1. How to add Icon List Block?\u00a0<\/h2>\n\n\n\n

To add the\u00a0Icon List<\/strong>\u00a0Block in your Gutenberg editor first click on (+) icon then in the search box type \u201cIcon List<\/strong>\u201d and you will see the \u201cIcon List<\/strong>\u201d block.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After inserting the \u201cIcon List<\/strong>\u201d block you will get the default look like below. Now you need to change the preset and other settings.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2. General Settings <\/h2>\n\n\n\n

The General settings tab has the Preset option and counter settings number settings option. The General settings panel properties are as follows.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
  • Presets<\/strong>: From our pre-defined presets you can select which style you like<\/li>
  • Icon\/ Image<\/strong>: Set Media Type if icon then select the icon, if image then selects the custom image.<\/li>
  • Items<\/strong>: You can add items and also can set individual icons for each item.<\/li><\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    • Content<\/strong>: Set Horizontal or vertical style layout, alignment, icon alignment and icon position.<\/li><\/ul>\n\n\n\n

      3. Style Settings  <\/h2>\n\n\n\n

      From the Styles settings tab, you can set all possible styles typography, color, padding, background, and other style settings.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n
      • List item<\/strong>: Set the typography, the gap between items normal and hover color, background, padding, and Border.<\/li><\/ul>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        • Icon\/ Image<\/strong>: You can set the Gap between the icon and label, normal and hover color, background, size, and dimension.<\/li>
        • Border<\/strong>: Set border normal and hover border style and border-radius.<\/li><\/ul>\n\n\n\n

          4. Advanced Settings <\/h2>\n\n\n\n

          From the advanced settings tab, you can control the wrapper style.<\/p>\n\n\n\n

          \"\"<\/figure>\n\n\n\n
          • Wrapper Margin & Padding:<\/strong>\u00a0You can set the wrapper margin and padding in px, em or %<\/li>
          • Background:<\/strong>\u00a0You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.<\/li>
          • Border:<\/strong>\u00a0You can set the default border or hover border with different border styles and also can set border-radius.<\/li>
          • Shadow:<\/strong>\u00a0You can set box shadow for normal and hover style.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"

            The Icon List Gutenberg Block is a great way to display a list of items with icons. 1. How to add Icon List Block?\u00a0 To add the\u00a0Icon List\u00a0Block in your Gutenberg editor first click on (+) icon then in the search box type \u201cIcon List\u201d and you will see the \u201cIcon List\u201d block. After inserting […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[2],"doc_tag":[],"class_list":["post-681","docs","type-docs","status-publish","hentry","doc_category-content-blocks"],"year_month":"2026-09","word_count":312,"total_views":"7","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"RadiusTheme","author_nicename":"rttlp","author_url":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/author\/rttlp\/"},"doc_category_info":[{"term_name":"Content Blocks","term_url":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/docs-category\/content-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/docs\/681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":6,"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/docs\/681\/revisions"}],"predecessor-version":[{"id":695,"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/docs\/681\/revisions\/695"}],"wp:attachment":[{"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/media?parent=681"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/doc_category?post=681"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.radiustheme.com\/docs\/radius-blocks\/wp-json\/wp\/v2\/doc_tag?post=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}