ACF Radio as Image Select

acf-image-select.php

/**
 * Create a radio button field and set it to horizontal
 * Add each choice with image as label like beow
 * animation : <img src="/wp-content/themes/cobaltdesign/img/animation.svg" />
 * Change $field_name in the acf_icon_css function to what you called your theme
 */

function acf_icon_css()
{
	$field_name = 'expertise_icon';
	$css = '<style>
	div[data-name="' .$field_name . '"] ul.acf-radio-list,
	tr[data-name="' .$field_name . '"] ul.acf-radio-list {
		background: white;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
	div[data-name="' .$field_name . '"] ul.acf-radio-list label input,
	tr[data-name="' .$field_name . '"] ul.acf-radio-list label input {
		display: none;
	}
	div[data-name="' .$field_name . '"] ul.acf-radio-list li,
	tr[data-name="' .$field_name . '"] ul.acf-radio-list li {
		height: 80px;
	}
	div[data-name="' .$field_name . '"] ul.acf-radio-list label img,
	tr[data-name="' .$field_name . '"] ul.acf-radio-list label img {
		height: 60px;
		margin: 10px 0;
		border: 1px solid white;
		border-radius: 10%;
	}
	div[data-name="' .$field_name . '"] ul.acf-radio-list label img:hover,
	tr[data-name="' .$field_name . '"] ul.acf-radio-list label img:hover {
		border-color: #2271b1;
	}
	div[data-name="' .$field_name . '"] ul.acf-radio-list label.selected img,
	tr[data-name="' .$field_name . '"] ul.acf-radio-list label.selected img {
		border-color: #2271b1;
	}
	</style>';
	echo $css;
}
add_action('admin_head', 'acf_icon_css');