{"id":4828,"date":"2026-10-29T04:47:22","date_gmt":"2026-10-29T04:47:22","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/icon-pack\/"},"modified":"2026-10-29T05:07:28","modified_gmt":"2026-10-29T05:07:28","password":"","slug":"icon-pack","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/icon-pack\/","title":{"rendered":"Icon Pack"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Icon Pack is the icon library built into ShapeBlock. It has 913 icons: ShapeBlock\u2019s own set of 112 icons and 801 Bootstrap Icons (version 1.13.1, MIT licence) sorted into 13 categories. Every ShapeBlock block with an icon setting uses it, in the free plugin and in ShapeBlock Pro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There is nothing to install or turn on. Pick an icon in the block settings, then style it with the block\u2019s own color and size options.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Choose an Icon<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to pick an icon for a block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Open the Icon Picker<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n<li>Select a block that shows an icon, such as <strong>Icon<\/strong>, <strong>Icon Box<\/strong>, <strong>Icon List<\/strong>, <strong>Features List<\/strong>, <strong>Button<\/strong>, or <strong>Social Icon<\/strong>.<\/li>\n\n\n\n<li>Open the block settings in the right-hand sidebar. On the Icon block, the field is in the <strong>Settings<\/strong> tab, under <strong>Content \u203a Icon<\/strong>.<\/li>\n\n\n\n<li>Click the icon field. The icon picker opens beside the sidebar.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"930\" height=\"800\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-picker-721e18.webp\" alt=\"ShapeBlock icon picker opened from the Icon field, showing 913 icons\" class=\"wp-image-4807\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-picker-721e18.webp 930w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-picker-721e18-600x516.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-picker-721e18-300x258.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-picker-721e18-768x661.webp 768w\" sizes=\"auto, (max-width: 930px) 100vw, 930px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Find and Pick an Icon<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Search icons\u2026:<\/strong> Type a word to filter the icons. The search matches icon names and a few extra words, so &#8220;arrow&#8221; finds 62 icons, &#8220;cross&#8221; finds the x icons, and &#8220;arrow right&#8221; finds arrow-right.<\/li>\n\n\n\n<li><strong>Category list:<\/strong> Choose <strong>All categories<\/strong> to see every icon, or one set to see only its icons. The search works inside the chosen set.<\/li>\n\n\n\n<li><strong>Remove icon:<\/strong> Clear the icon from the block.<\/li>\n\n\n\n<li><strong>Icon count:<\/strong> Shows how many icons match the search and the chosen set.<\/li>\n\n\n\n<li><strong>Show more:<\/strong> The picker shows 120 icons at first. Click Show more to add 240 more.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Click an icon to use it. The picker closes and the block shows the new icon straight away.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"507\" height=\"785\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-search-d44ddd.webp\" alt=\"Icon picker with the search word arrow, showing 62 icons\" class=\"wp-image-4816\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-search-d44ddd.webp 507w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-search-d44ddd-194x300.webp 194w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Icon Sets<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The category list in the picker has these sets. The numbers are the icon counts the picker shows.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ShapeBlock:<\/strong> 112 icons, including ShapeBlock\u2019s block icons and social logos.<\/li>\n\n\n\n<li><strong>Arrows:<\/strong> 80 icons.<\/li>\n\n\n\n<li><strong>Interface:<\/strong> 189 icons.<\/li>\n\n\n\n<li><strong>Social &amp; brands:<\/strong> 52 icons.<\/li>\n\n\n\n<li><strong>Communication:<\/strong> 47 icons.<\/li>\n\n\n\n<li><strong>Business &amp; shop:<\/strong> 81 icons.<\/li>\n\n\n\n<li><strong>Media:<\/strong> 57 icons.<\/li>\n\n\n\n<li><strong>Files &amp; text:<\/strong> 62 icons.<\/li>\n\n\n\n<li><strong>Devices &amp; tech:<\/strong> 47 icons.<\/li>\n\n\n\n<li><strong>People &amp; health:<\/strong> 44 icons.<\/li>\n\n\n\n<li><strong>Travel &amp; places:<\/strong> 39 icons.<\/li>\n\n\n\n<li><strong>Nature &amp; weather:<\/strong> 39 icons.<\/li>\n\n\n\n<li><strong>Tools &amp; misc:<\/strong> 45 icons.<\/li>\n\n\n\n<li><strong>More:<\/strong> 19 icons.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">All sets after ShapeBlock come from Bootstrap Icons: 801 icons in total.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"507\" height=\"1157\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-sets-315a44.webp\" alt=\"The category list of the icon picker with all icon sets\" class=\"wp-image-4817\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-sets-315a44.webp 507w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-sets-315a44-131x300.webp 131w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-sets-315a44-449x1024.webp 449w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Styling an Icon<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Icons are drawn from an icon font, so they take the color and size you set and stay sharp at any size. Each block styles its icon with its own options. On the <strong>Icon<\/strong> block:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout tab:<\/strong> <strong>Alignment<\/strong> and <strong>Size (px)<\/strong>. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n<li><strong>Style tab:<\/strong> <strong>View<\/strong> (Default, Stacked, or Framed), <strong>Shape<\/strong> (Circle, Rounded, or Square, shown with Stacked and Framed), <strong>Padding<\/strong>, <strong>Color<\/strong>, <strong>Background<\/strong>, <strong>Rotation (deg)<\/strong>, <strong>Border<\/strong>, <strong>Box Shadow<\/strong>, and <strong>Border Radius<\/strong>.<\/li>\n\n\n\n<li><strong>Hover:<\/strong> <strong>Color (Hover)<\/strong>, <strong>Background (Hover)<\/strong>, <strong>Border (Hover)<\/strong>, <strong>Rotation Hover (deg)<\/strong>, and a hover animation, also in the Style tab.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Blocks such as Icon Box, Icon List, and Features List have their own icon color and size settings in their Style tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1484\" height=\"1075\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-style-acf7bb.webp\" alt=\"Icon block selected in the editor with the Style tab open\" class=\"wp-image-4812\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-style-acf7bb.webp 1484w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-style-acf7bb-600x435.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-style-acf7bb-300x217.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-style-acf7bb-1024x742.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/icon-pack-style-acf7bb-768x556.webp 768w\" sizes=\"auto, (max-width: 1484px) 100vw, 1484px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Blocks That Use the Icon Pack<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ShapeBlock (free):<\/strong> Accordion, Breadcrumb, Button, Counter, Features List, Filterable List, Hover Box, Icon, Icon Box, Icon List, Isotope Filter, Offcanvas, Post Grid, Scroll Top, Search, Simple Gallery, Social Icon, Social Share, Sticky Stack, Table, Tabs, Team Member, and Testimonial.<\/li>\n\n\n\n<li><strong>ShapeBlock Pro:<\/strong> Advanced Accordion, Advanced Button, Flip Box, Image Hotspot, Rotating Text, and Video Player use the same picker and the same icons. Pro does not add extra icon sets.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How the Icons Load<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ShapeBlock set:<\/strong> Its font (about 16 KB) loads with ShapeBlock\u2019s main stylesheet.<\/li>\n\n\n\n<li><strong>Bootstrap Icons:<\/strong> The font (about 87 KB) and its stylesheet load only on pages where a ShapeBlock block shows one of these icons. Pages without them load nothing extra. The whole font loads as one file, which the browser then keeps in its cache.<\/li>\n\n\n\n<li><strong>Editor:<\/strong> In the block editor the library is always loaded, so the picker and the block previews can show every icon.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> The Icon Pack works the same in the free plugin and in ShapeBlock Pro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Live demo:<\/strong> see the icons in use on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/icon-pack\/\">Icon Pack demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Icon Pack is the icon library built into ShapeBlock. It has 913 icons: ShapeBlock\u2019s own set of 112 icons and 801 Bootstrap Icons (version 1.13.1, MIT licence) sorted into 13 categories. Every ShapeBlock block with an icon setting uses it, in the free plugin and in ShapeBlock Pro. There is nothing to install or [&hellip;]<\/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-4828","docs","type-docs","status-publish","hentry","doc_category-content-block"],"year_month":"2026-11","word_count":664,"total_views":"2","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\/4828","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=4828"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4828\/revisions"}],"predecessor-version":[{"id":4859,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4828\/revisions\/4859"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4828"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4828"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}