Icon box block - Greenshift

Blog Staff

May 2, 2022

Icon block is simple but in some scenarios very helpful block. It allows to show predefined icon or upload own image and even custom svg code.

It has two styles – regular

and boxed

As any other block, it has all design options of greenshift library and allow to make custom effects. For example, animations

Also, iconbox block can be used as button because it has linkable container option

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p>Icon block is simple but in some scenarios very helpful block. It allows to show predefined icon or upload own image and even custom svg code.</p>

<p>It has two styles - regular</p>

<div id="gspb_iconBox-id-gsbp-f5e3b5fe-6b3b" class="gspb_iconBox gspb_iconBox-id-gsbp-f5e3b5fe-6b3b wp-block-greenshift-blocks-iconbox"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M928 8.6l-896 516.8c-46 26.6-41.4 94.4 7.6 114.6l280.4 116v204c0 60.4 75.6 86.6 113.4 40.6l121.4-147.6 252.8 104.4c38.2 15.8 81.4-8.4 87.6-49.4l128-834.2c8.2-53.4-49.2-91.8-95.2-65.2zM384 960v-177.6l109 45-109 132.6zM832 898.2l-412.4-170.4 399-471.6c9.6-11.2-5.8-26.4-17-16.8l-510.6 435.2-227-93.6 896-517-128 834.2z"></path></svg></div></div>

<p>and boxed</p>

<div id="gspb_iconBox-id-gsbp-c11de423-c462" class="gspb_iconBox gspb_iconBox-id-gsbp-c11de423-c462 wp-block-greenshift-blocks-iconbox"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M928 8.6l-896 516.8c-46 26.6-41.4 94.4 7.6 114.6l280.4 116v204c0 60.4 75.6 86.6 113.4 40.6l121.4-147.6 252.8 104.4c38.2 15.8 81.4-8.4 87.6-49.4l128-834.2c8.2-53.4-49.2-91.8-95.2-65.2zM384 960v-177.6l109 45-109 132.6zM832 898.2l-412.4-170.4 399-471.6c9.6-11.2-5.8-26.4-17-16.8l-510.6 435.2-227-93.6 896-517-128 834.2z"></path></svg></div></div>

<p>As any other block, it has all design options of greenshift library and allow to make custom effects. For example, animations</p>

<div id="gspb_container-id-gsbp-fc43736c-d848" class="gspb_container gspb_container-gsbp-fc43736c-d848 wp-block-greenshift-blocks-container" data-gsapinit="1" data-from="yes" data-duration="0.7" data-y="15" data-rx="80" data-o="0" data-origin="bottom center" data-stdelay="0.3" data-stchild="yes" data-prehidden="1">
<div id="gspb_iconBox-id-gsbp-0c5aa56a-7490" class="gspb_iconBox gspb_iconBox-id-gsbp-0c5aa56a-7490 wp-block-greenshift-blocks-iconbox"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M1072 960h-864c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h864c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM1168 320c-61.8 0-112 50.2-112 112 0 15.2 3 29.6 8.6 42.8l-112.6 67.6c-10.4 6.2-21.6 9.2-32.8 9.2-22.2 0-43.8-11.6-55.6-32.2l-148.8-260.4c22.6-20.6 37.2-50 37.2-83 0-61.8-50.2-112-112-112s-112 50.2-112 112c0 33 14.6 62.4 37.2 82.8l-148.8 260.4c-11.8 20.8-33.4 32.2-55.6 32.2-11.2 0-22.6-3-32.8-9.2l-112.6-67.6c5.4-13.2 8.6-27.6 8.6-42.8 0-61.8-50.2-112-112-112s-112 50.4-112 112.2 50.2 112 112 112c4 0 7.8-0.8 11.6-1.2l132.4 353.2h768l132.4-353.2c3.8 0.4 7.6 1.2 11.6 1.2 61.8 0 112-50.2 112-112s-50.2-112-112-112zM640 128c26.4 0 48 21.6 48 48s-21.6 48-48 48-48-21.6-48-48 21.6-48 48-48zM112 480c-26.4 0-48-21.6-48-48s21.6-48 48-48 48 21.6 48 48-21.6 48-48 48zM979.6 832h-679.2l-112-298.8 106.8 64c20 12 42.6 18.2 65.8 18.2 45.8 0 88.4-24.8 111.2-64.6l151.2-264.6c5.6 0.8 11 1.6 16.8 1.6s11.2-0.8 16.8-1.6l151 264.8c22.8 39.8 65.4 64.4 111.2 64.4 23.2 0 45.8-6.4 65.8-18.2l106.8-64-112.2 298.8zM1168 480c-26.4 0-48-21.6-48-48s21.6-48 48-48 48 21.6 48 48-21.6 48-48 48z"></path></svg></div></div>

<div id="gspb_iconBox-id-gsbp-2223b290-c58e" class="gspb_iconBox gspb_iconBox-id-gsbp-2223b290-c58e wp-block-greenshift-blocks-iconbox"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1152 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M927.4 0h-702.8c-8.4 0-16.2 4.4-20.6 11.6l-200.6 325.6c-5.4 8.8-4.4 20.2 2.4 28l552 650.4c9.6 11.2 26.8 11.2 36.4 0l552-650.4c6.8-7.8 7.6-19.2 2.4-28l-200.6-325.6c-4.4-7.2-12.2-11.6-20.6-11.6zM900.2 72l148.6 248h-166l-113.6-248h131zM690 72l113.6 248h-455.4l113.8-248h228zM251.8 72h131l-113.6 248h-166l148.6-248zM122.4 384h146l163.6 384-309.6-384zM346.4 384h459l-229.4 527.6-229.6-527.6zM720 768l163.6-384h146l-309.6 384z"></path></svg></div></div>

<div id="gspb_iconBox-id-gsbp-cd0d935a-1d90" class="gspb_iconBox gspb_iconBox-id-gsbp-cd0d935a-1d90 wp-block-greenshift-blocks-iconbox"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1152 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M1092.4 19.4c-5.8-13-17.2-19.4-28.6-19.4-10.6 0-21.4 5.6-28 17-62 107.8-173 175-299.8 175h-160c-212 0-384 172-384 384 0 35.6 5.2 69.8 14.2 102.4-148.2 129-202.6 279.2-203.6 282-8.6 25 4.6 52.4 29.6 61 28 9.6 53.4-7.6 61-29.6 0.8-2.2 42-115 152.6-220.2 75.2 126.4 217.2 202.4 371 186.2 314.2-22.8 535.2-304.4 535.2-649.2 0-100.4-21.6-204.4-59.6-289.2zM606.8 862.4c-172.2 18.2-261.2-109-284.4-153 94.8-65.8 224-117.4 397.8-117.4 26.4 0 48-21.6 48-48s-21.6-48-48-48c-182.6 0-322.2 51-428 118.8-1.8-12.8-4-25.6-4-38.8 0-158.8 129.2-288 288-288h160c115.8 0 223.2-44 304-121.8 10.4 46.4 16 95 16 142.4-0.2 302-187.8 534.8-449.4 553.8z"></path></svg></div></div>

<div id="gspb_iconBox-id-gsbp-64bdbb8c-487f" class="gspb_iconBox gspb_iconBox-id-gsbp-64bdbb8c-487f wp-block-greenshift-blocks-iconbox"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 704 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M352 160c-105.88 0-192 86.12-192 192 0 17.68 14.32 32 32 32s32-14.32 32-32c0-70.6 57.44-128 128-128 17.68 0 32-14.32 32-32s-14.32-32-32-32zM192.12 918.34c0 6.3 1.86 12.44 5.36 17.68l49.020 73.68c5.94 8.92 15.94 14.28 26.64 14.28h157.7c10.72 0 20.72-5.36 26.64-14.28l49.020-73.68c3.48-5.24 5.34-11.4 5.36-17.68l0.1-86.36h-319.92l0.080 86.36zM352 0c-204.56 0-352 165.94-352 352 0 88.74 32.9 169.7 87.12 231.56 33.28 37.98 85.48 117.6 104.84 184.32v0.12h96v-0.24c-0.020-9.54-1.44-19.020-4.3-28.14-11.18-35.62-45.64-129.54-124.34-219.34-41.080-46.86-63.040-106.3-63.22-168.28-0.4-147.28 119.34-256 255.9-256 141.16 0 256 114.84 256 256 0 61.94-22.48 121.7-63.3 168.28-78.22 89.22-112.84 182.94-124.2 218.92-2.805 8.545-4.428 18.381-4.44 28.594l-0 0.006v0.2h96v-0.1c19.36-66.74 71.56-146.36 104.84-184.32 54.2-61.88 87.1-142.84 87.1-231.58 0-194.4-157.6-352-352-352z"></path></svg></div></div>
</div>

<p>Also, iconbox block can be used as button because it has linkable container option</p>

<div id="gspb_iconBox-id-gsbp-e71ec113-6ac0" class="gspb_iconBox gspb_iconBox-id-gsbp-e71ec113-6ac0 wp-block-greenshift-blocks-iconbox"><a class="gspb-containerlink" href="#" rel="noopener"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M832 416h-288v-288c0-35.34-28.66-64-64-64h-64c-35.34 0-64 28.66-64 64v288h-288c-35.34 0-64 28.66-64 64v64c0 35.34 28.66 64 64 64h288v288c0 35.34 28.66 64 64 64h64c35.34 0 64-28.66 64-64v-288h288c35.34 0 64-28.66 64-64v-64c0-35.34-28.66-64-64-64z"></path></svg></div></a></div>

design, icons