---
title: "Value-Based Icons"
description: "**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…"
url: "https://petmatchpro.com/docs/value-based-icons/"
updated: "2026-10-26"
category: "Icons & Overlays"
---

# 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

| Field | Value | Icon Displayed |
| --- | --- | --- |
| Sex | Female | icon-female.svg |
| Sex | Male | icon-male.svg |
| Age | Kitten | icon-kitten.svg |
| Age | Puppy | icon-puppy.svg |
| Age | Senior | icon-senior.svg |
| Age | Adult | icon-adult.svg |
| Age | Juvenile | icon-juvenile.svg |
| Age | Young | icon-young.svg |
| Age | Young Adult | icon-young-adult.svg |
| Species | Dog | icon-dog.svg |
| Species | Cat | icon-cat.svg |
| Species | Bird | icon-bird.svg |
| Species | Rabbit | icon-rabbit.svg |

## Boolean (Yes/No) Icons

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

| Field | Yes Value | No Value |
| --- | --- | --- |
| OK with Cats | icon-ok-cats.svg | icon-ok-cats-not.svg |
| OK with Dogs | icon-ok-dogs.svg | icon-ok-dogs-not.svg |
| OK with Kids | icon-ok-kids.svg | icon-ok-kids-not.svg |
| House Trained | icon-house-trained.svg | icon-house-trained-not.svg |

## 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](/docs/icon-reference-gallery/) - Browse all 120+ icons
- [Customizing Icon Display](/docs/customizing-icon-display/) - Configure max counts and positions
- [Understanding Pet Icons](/docs/understanding-pet-icons/) - Icon basics

 Value-Based Icons ultima modifica:  2026-03-25T18:43:20-04:00 da PetMatchPro