HTML + CSSFilters
Amenity filter tiles with icons
Six amenities as icon tiles that tick on and off, with a live count of selected filters.
Settings
16px
1x
Code
<fieldset class="uv-fam"><legend>Services</legend><div class="gr"><label><input type="checkbox" checked><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 9a14 14 0 0 1 19 0M5.5 12.5a9.5 9.5 0 0 1 13 0M8.7 16a5 5 0 0 1 6.6 0"/><circle cx="12" cy="19" r=".9" fill="currentColor"/></svg><span class="nm">Wifi</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 17c1.6 1.2 3.2 1.2 4.8 0s3.2-1.2 4.7 0 3.2 1.2 4.8 0 3.1-1.2 4.7 0M8 14V5.5a2 2 0 0 1 4 0M16 14V5.5a2 2 0 0 0-4 0M8 8.5h8M8 11.5h8"/></svg><span class="nm">Pool</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><path d="M9.5 16.5v-9h3.2a2.7 2.7 0 0 1 0 5.4H9.5"/></svg><span class="nm">Parking</span><b aria-hidden="true"></b></span></label><label><input type="checkbox" checked><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6.5" cy="10" r="1.8"/><circle cx="10" cy="6" r="1.8"/><circle cx="14" cy="6" r="1.8"/><circle cx="17.5" cy="10" r="1.8"/><path d="M12 11.5c-2.6 0-5 3.6-5 5.6 0 1.6 1.4 2.4 2.8 2 1.5-.4 2.9-.4 4.4 0 1.4.4 2.8-.4 2.8-2 0-2-2.4-5.6-5-5.6z"/></svg><span class="nm">Pets</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9M9.5 4.5L12 7l2.5-2.5M9.5 19.5L12 17l2.5 2.5"/></svg><span class="nm">Air conditioning</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 3.5v7M5 3.5v4a2 2 0 0 0 4 0v-4M7 10.5v10M16.5 20.5v-17c-2.2 0-3.5 2.7-3.5 6.5 0 1.8.8 3 3.5 3"/></svg><span class="nm">Kitchen</span><b aria-hidden="true"></b></span></label></div><p class="ct"><span class="n"></span> <span>selected</span></p></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
See all FiltersWhere to use it
Holiday rentals, hotels, coworking spaces and gyms all filter by amenities, and icons make the list faster to scan than plain checkboxes. Each tile here pairs a line icon with a short name; checking it tints the tile, colors the icon and pops a small check badge into the corner. A CSS counter below shows how many are selected.
The tiles are native checkboxes in a fieldset, so they work with forms, keyboards and screen readers. Swap icons and labels in the code, and keep names short so they fit on two lines at most.