Everything you need to know about adding and customizing the Icon block — from choosing the right icon to adjusting its size, color, and opacity.
An Icon is a small graphic symbol used to visually represent an idea, action, or category. Icons help break up text-heavy layouts, draw attention to key features, and give your store a polished, professional look without relying on full-size images.
In the Boardwalk theme, the Icon block lets you place a single decorative icon anywhere blocks are supported. The theme includes a built-in library of over 60 icons organized into categories like E-commerce, Shipping & Delivery, Apparel, Furniture, and more. Each icon can be resized, recolored, and adjusted for opacity — making it easy to match your store's branding.
Follow these steps to add and configure an Icon block in the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want to add an icon using the page selector
dropdown at the top center of the editor.
Click Add block inside any section or group that supports blocks, then choose Icon from the list. The block will appear with a default icon.
Click on the Icon block in the sidebar to open its settings. Use the Icon dropdown to browse the built-in icon library and select the icon that best fits your content. Icons are organized into groups to make browsing easier.
Adjust the Icon size, Opacity, and Color to match your store's design. These settings let you fine-tune exactly how the icon looks on the page.
Click Save in the Theme Editor. Preview your page to verify the icon is displaying at the right size, color, and position.
These settings are available when you click on the Icon block in the Theme Editor sidebar. They control which icon is displayed and how it looks.
Choose which icon to display from the built-in library. Icons are organized into groups: Navigation & UI, E-commerce, Shipping & Delivery, User & Account, Communication, Apparel, Furniture, and Misc. See the Icon Library section below for the full list.
Controls the width and height of the icon in pixels. Range: 12px to 120px.
Controls how transparent the icon appears. Range: 10% to 100%. A lower value makes the icon more see-through, which is useful for subtle decorative accents.
Sets the color of the icon. If no color is chosen or the color is set to transparent, the icon will inherit the text color from the section's color scheme.
The Icon block includes a built-in library of over 60 icons organized into eight categories. Here is the full list of available icons by group.
Menu, Close, Search, Chevron down, Chevron up, Chevron left, Chevron right, Arrow left, Arrow right, Arrow up, Arrow down, Plus, Minus, Check, Info, Question, Filter, Sliders, Grid, List
Cart, Bag, Bag simple, Heart, Heart filled, Star, Star filled, Tag, Percent, Gift, Receipt, Credit card, Wallet, Storefront
Truck, Package, Map pin, Clock, Calendar, Return
Sign in, Sign out
Envelope, Phone, Chat, Share
T-shirt, Pants, Dress, Coat hanger, Sneaker, Watch, Ruler
Armchair, Couch, Bed, Lamp, Desk, Cabinet, Plant
Eye, Eye slash, Lock, Shield check, Sparkle, Lightning, Leaf, Fire, Globe, Sun, Moon, Download, Upload, Trash, Pencil, Gear
A few helpful details about how the Icon block behaves.
If you don't set a custom color (or set it to transparent), the icon automatically uses the text color from the parent section's color scheme. This makes it easy to keep icons consistent with surrounding text without manually matching colors.
The Icon block displays as an inline element, meaning it sits alongside other content in the same row rather than taking up a full line. This makes it easy to pair icons with text blocks or place multiple icons side by side.
The Icon block is listed under the Media category and can be added to any section or group in the theme that accepts blocks. This includes sections like Rich Text, Multicolumn, Image with Text, and many others.
The Icon block uses a fixed library of built-in icons. You cannot upload your own custom SVG or image files through this block. If you need a custom icon, consider using an Image block with a transparent PNG or SVG image instead.