> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/product-and-collection/collection-icons.md).

# Collection Icons

The **Collection Icons** module is ideal for showcasing multiple product collections or categories using a grid of icons with titles. Commonly used on homepages for navigation, category highlights, or brand groupings.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2FZct3HtBrUPkKXGwrhpmV%2F68231cffb08922b78680ff1a5c981a7.png?alt=media&amp;token=bdaeda29-d092-4081-954d-90c421db5d41" alt=""><figcaption></figcaption></figure>

### 🎨 Style Settings

* **Color Scheme**:\
  Choose or customize a color palette that defines all visual elements (background, text color, button color, etc.). Align the scheme with your brand identity.

***

### 🧱 Block Structure

* **Block Title**: Add a main title and optional subtitle to describe this section.
* **Supported Inner Blocks**:
  * Badge Group, Buttons, Button Group, Countdown, Description, Discount Code
  * Follow Us, Title, Subtitle, Stats, Icons, Icon with Text
  * Keywords, Link Group, Social Media List, Video Button, Spacers, etc.

***

### 🔳 Icon List Configuration

* **Layout Options**:
  * *Grid*: Clean and structured presentation
  * *Slider*: Scrollable layout for compact or dynamic designs
* **Column Settings**:
  * Available: 5–12 columns
  * Recommended: 6–8 columns for optimal readability and visual spacing
* **Mobile Settings**:
  * Grid layout is the default
  * Optional slider can be enabled to improve mobile usability

***

### 🧷 Individual Icon Block Settings

Each icon block can include:

* **Collection Selection**: Link to a product collection; clicking the icon navigates to the collection page
* **Image Upload**: Visual representation of the collection (product photo, symbol, or logo)
* **Image Shape**:
  * *Auto-fit* (maintains original ratio)
  * *Circle* (ideal for logo-style icons)
  * *Square* (for consistent visual alignment)
* **Title Setup**: Display a short label below the icon for easy identification

***

### ✅ Tips for Effective Use

* Use consistent icon styles and image quality across all items for a clean look
* Upload high-resolution images with transparent backgrounds where possible
* Keep titles short and clear to prevent wrapping or clutter
* For navigation purposes, enable slider mode on mobile for smoother experience
* Consider using parallax or hover animations to enhance engagement