Custom Bullet Point Icons

Code Toolkit
Written By Squarestylist Support

What You'll Create

Custom bullet point icons in unordered lists using images, SVGs, or color-responsive shapes. Replace default bullets with decorative elements that match your brand.

The Problem It Solves

Squarespace's default bullet styles are limited and generic. This technique lets you use any image as a bullet point, including icons that automatically respond to your site's color theme using CSS masking.

Perfect For

Feature lists, Sales pages, Service descriptions, About pages, Pricing comparisons, Brand-aligned content.

What Makes This Different

CSS pseudo-elements replace default bullets with custom background images. For color-responsive bullets, CSS mask-image uses SVG shapes while background-color inherits from the site's color variables. This means your bullets automatically match your section's color palette.

Details

  • Section Type: Fluid & Classic

  • Code Type: CSS

  • Prerequisites: Understanding of pseudo-elements; SVG or image file for bullet icon

  • Toolkit Title: Custom Bullet Points

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Circular Summary Block Thumbnails
Next

Custom Social Media Icons