Value-Based Icons #

Requires Junior license or higher.

Value-based icons are icons that PetMatchPro automatically selects based on the actual value of an animal’s data field. Instead of showing a generic “gender” icon, the system shows a specific “female” or “male” icon based on the animal’s sex.

How Value-Based Icons Work #

When PetMatchPro displays an icon for a field, it follows this resolution process:

1. Check if a value-specific icon exists for the field’s current value (e.g., icon-female.svg for Sex = Female)
2. If found, use that specific icon
3. If not found, fall back to the generic field icon (e.g., icon-gender.svg)

Examples #

Boolean (Yes/No) Icons #

Some fields have both “yes” and “no” icons. PetMatchPro checks the field value and shows the appropriate variant:

Conditional Icons #

Some icons only appear when a specific condition is met:

• Featured – Shows only when the animal is marked as featured
• On Hold – Shows only when the animal is on hold
• Altered – Shows only when the animal is spayed/neutered
• Declawed – Shows only for cats that are declawed
• Special Needs – Shows only when the animal has special needs
• Video – Shows only when the animal has a video

Species-Specific Icons #

Some icons are species-aware. For example, the “declawed” icon only appears for cats, not dogs. PetMatchPro checks the animal’s species before displaying species-limited icons.

Fallback Behavior #

When no value-specific icon exists for a field value:

• PetMatchPro uses the generic field icon (e.g., icon-species.svg for an uncommon species)
• If no generic icon exists either, no icon is displayed for that field

Theme Icon Overrides #

Requires Junior license or higher.

You can replace any icon by placing a custom SVG file in your theme directory:

1. Create the directory petmatchpro/includes/images/ inside your active theme folder
2. Place your custom SVG file with the same file name as the icon you want to replace (e.g., icon-female.svg)
3. PetMatchPro will use your theme’s version instead of the plugin’s default

This lets you customize the icon style to match your organization’s branding without modifying plugin files.

CSS Custom Properties #

PetMatchPro generates CSS custom properties for all icon SVGs automatically. These appear as --pmp-icon-{name} variables in the page source. Templates use these variables to render icons, which means your color settings apply uniformly.

Next Steps #

• Icon Reference Gallery – Browse all 120+ icons
• Customizing Icon Display – Configure max counts and positions
• Understanding Pet Icons – Icon basics