These icons appear inline inside every Priority Pixels Insights post. Each icon comes in three colour variants (green, pink and yellow) matching the brand palette. All icons live on the server in the WordPress theme at /wp-content/themes/prioritypixels/assets/icons-blog/ and are referenced by URL, so you never need to upload them.
All icons are animated (a subtle pulse loop), not flat.
Placement rules
Standard posts: three icons per post, one after the intro paragraph, one at the middle H2, one at the last H2.
Shorter posts: two icons is fine (drop the middle one) if the post only has one or two H2s.
Each icon is aligned to the right so text wraps around it: class="align-right", width="200px", inline margin 0 0 20px 20px.
Vary the colours across a post - don't use three of the same. Choose whichever colour best contrasts with the surrounding imagery.
Match the icon to the section content: e.g. an audit icon next to an audit paragraph, backlinks-warning next to a risk callout.
How to add icons (using Claude)
Icons are usually added by pasting a prompt into Claude (Claude Code in an IDE, or a claude.ai chat). Copy the prompt below, tell Claude the post subject, and it will pick three suitable icons from the grid and output ready-to-paste HTML.
Give me three <img> tags to add icons throughout a Priority Pixels Insights post.
Post subject: <short description of what the post is about>
Rules:
- Choose three icons from https://brand.prioritypixels.co.uk/icons.php that match the subject. Pick different icons for each of the three positions (intro, middle H2, last H2).
- Vary the colour across the three tags. Colours available: green, pink, yellow.
- Each tag must be:
<img alt="<Icon Name>" class="align-right" decoding="async"
src="https://prioritypixels.co.uk/wp-content/themes/prioritypixels/assets/icons-blog/<name>-<colour>.svg"
style="margin:0 0 20px 20px;" width="200px"/>
- alt is the icon name in Title Case with dashes removed (e.g. "ai-seo" becomes "AI SEO", "backlinks-warning" becomes "Backlinks Warning").
- Output only the three <img> tags, one per line, no preamble.
Edit the post in WordPress, find the <img> in a Custom HTML block, and swap the src filename for a different name-colour.svg from the grid below. Every icon shares the same 2605x2605 viewBox, so the replacement renders at exactly the same width.
