Icon Size Customization #
Control the display size of pet attribute icons, overlay icons, and label icons in both search and detail contexts. Available to Junior license and above.
Admin Settings #
Icon size controls are located in General > Display Options > Icon Sizes. Six dropdown fields are available, one per icon type and context:
| Setting | Context |
|---|---|
| Search Pet Icon Size | Pet attribute icons in search results |
| Search Overlay Icon Size | Photo overlay icons in search results |
| Search Label Icon Size | Field label icons in search results |
| Detail Pet Icon Size | Pet attribute icons on detail pages |
| Detail Overlay Icon Size | Photo overlay icons on detail pages |
| Detail Label Icon Size | Field label icons on detail pages |
When a dropdown is left at Default, the template’s built-in CSS size is used. The other three options apply a fixed pixel size:
| Option | Pixel Size | Effect |
|---|---|---|
| Default | (none) | Uses the template’s built-in size (no override) |
| Small | 20px | Smaller icons |
| Large | 40px | Larger icons |
| Extra Large | 56px | Largest icons |
Shortcode Override #
The icon_size parameter overrides all icon sizes on that page. It accepts named presets or a numeric pixel value:
Named preset:
[pmp-search type="adopt" icon="enable" icon_size="large"]
[pmp-details icon="enable" icon_size="xl"]
Numeric pixel value:
[pmp-details icon="enable" icon_size="48"]
When using the shortcode parameter, all six icon types (pet, overlay, label in both search and detail) are set to the same value.
Priority Chain #
- Shortcode parameter
icon_size(highest priority, per-page) - Admin setting per icon type (site-wide default)
- Template default (built-in CSS value)
Template-Specific Sizes #
Some templates define their own icon sizes (e.g., the compact template uses smaller overlays). Admin and shortcode overrides take precedence over these template-specific values.
Next Steps #
- Customizing Icon Display — Enable/disable and configure icons
- Understanding Overlays — Overlay configuration and positioning
- Font Size Customization — Control text element sizes
- Color Customization — Customize icon and overlay colors
