Taxonomy term-specific Icons in WordPress Using ACF

This members-only tutorial provides the steps to show SVG icons set for categories/tags/custom taxonomies for items (like posts) on single pages or in item listing pages like on the blog posts index i.e., in the loop.

We shall register a "Text Area" type of field using ACF for our desired taxonomies and enter the HTML for the SVG icon for each term (a specific category in the screenshot below).

To output the terms with icons, we simply pass the taxonomy name to a custom function like this:

wpdd_get_taxonomy_terms_with_icons( 'category' );

to get this sample HTML output:

To display linked tags with their icons:

wpdd_get_taxonomy_terms_with_icons( 'post_tag' );

Step 1

Create a new field group having a "Text Area" type of field and attach it to your desired taxonomies.

Step 2

Edit your taxonomy terms and paste the corresponding SVG image icon's HTML (can be viewed by opening the .svg file in a text/code editor) in the text area for each.

Step 3

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: [Function] Get Taxonomy Terms with ACF Icons

Code: