Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Icon Grid Features — Free Website Section Template
Features · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Icon Grid Features — Free Features Section Template With Icons
Icon Grid Features is the features section almost every landing page needs: a short eyebrow, a centred heading and intro, then a grid of cards that each pair an icon with a title, a sentence of detail and an optional "learn more" link. It turns a long list of capabilities into something visitors can scan in seconds.
Add, remove and reorder cards
Cards are a list, not fixed slots. Add as many as you need (up to twelve), duplicate one to start the next, move cards up or down, and remove the ones you don't need. Each card has its own icon, chosen from 60 clean line icons from the open-source Lucide set, its own text and its own optional link, which hides itself when you leave it empty.
One theme, every section
Colours, fonts, corner radius and content width come from the theme shared by every section in the library, so this grid matches the hero above it and the pricing below. Icons take the brand colour automatically on a soft tinted tile.
Responsive and animated
Three columns on wide screens, two on tablets and one on phones, using CSS container queries, so the grid responds to the space it actually has. With GSAP, the heading can reveal word by word (SplitText) and the cards stagger in once as the section scrolls into view; content stays visible without JavaScript and motion turns off for people who prefer it.
Export anywhere
Copy one HTML file, download a ZIP, copy a React or Vue component, or fork it into My Code. Need single cards instead of a whole section? Browse the UI Snippets library.
Why use it
Why Use the Icon Grid Features
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading and feature cards in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Up to twelve. Use + Add card to add one, the duplicate button to copy an existing card, the arrows to reorder and the cross to remove. The grid shows three per row on desktop, two on tablets and one on phones.
In the editor you can pick from 60 Lucide line icons. After exporting, each icon is an inline SVG, so you can replace it with any SVG icon, an emoji or an image in the HTML, React or Vue code.
Yes. It uses CSS container queries, so the grid adapts to the width of the element it sits in: three columns when there is room, then two, then one.
With GSAP: the heading reveals word by word using SplitText, then the cards stagger in once when the section scrolls into view. You can change the text effect, the entrance effect and the speed, or turn animation off.
It saves an editable copy of your Icon Grid Features in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.