Icon blocks

Start building fast, beautiful and modern looking websites in no time using our theme.
All elements

Icons blocks: Style 1

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

You can easily align to right the block icon by adding the .block-icon-right on the icon's container.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 2

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon and text aligned to right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Switch to a smaller icon adding the .block-icon-sm on the icon's container.

Clamtown weekly news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clamtown weekly news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clamtown weekly news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clamtown weekly news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 3

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 4

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 4 (centered)

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 4 (right aligned)

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dallams creek lake ledger

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Avera independent news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons blocks: Style 6

Add any background class .bg-* on the block icon to make it shiny and colorful. You can find all the classes in the colors dedicated page.

Beware the mountain

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Listen to the nature

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Rules not to follow

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Change the shape of the block icon by adding the class .circle or .rounded on the icon's wrapper.

Beware the mountain

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Listen to the nature

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Rules not to follow

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Icons blocks: Style 7

These icon blocks are the same as above, only that they don't have a background, but a 2px border. You can, also, opt for circle or rounded icons.

Beware the mountain

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Listen to the nature

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Rules not to follow

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Beware the mountain

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Listen to the nature

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Rules not to follow

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Add the .active class on the icon block to make it look and stay as if it was hovered.

Beware the mountain

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Listen to the nature

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Rules not to follow

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Beware the mountain

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Listen to the nature

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Rules not to follow

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Icons blocks: Style 8

Adaptive design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Carefully crafted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Continuously improved

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Adaptive design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Carefully crafted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Continuously improved

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Icons blocks: Style 9

Use any of the predefined colors (e.g: bg-blue) to change the icon's background.

The code is nice and flexible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

The code is nice and flexible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

The code is nice and flexible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

The code is nice and flexible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Icons blocks: Style 10

15 Aug

Clamtown weekly news

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.

15 Aug

Fall in love with Boomerang

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.

15 Aug

Cracking the Boomerang code

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.

15 Aug

Best practices for Boomerang

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.