I’m just started using a person card which i copied and ameded from someone however i cant seem to get the icons for zones to appear and was hoping someone might help me. I’m not very savy when it comes to code - more of a copy and paste and see what works kind of person 
Below is my code and ideally i’d like the icon to show up before the show_state:
show_state: '[[show_state]]')
aspect_ratio: 1/1.2
custom_fields:
battery: |
[[[
var i = states['sensor.neil_iphone_battery'].attributes.icon;
var b = states['sensor.neil_iphone_battery'].state;
return `<span style='vertical-align: 1px'>📱</span><ha-icon icon='${i}' style='width: 16px; vertical-align:2px'></ha-icon>${b}%`
]]]
distance: |
[[[
if (states['sensor.neil_iphone_home_distance'].state == 0)
return ""
else return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 16px; height: 16px; vertical-align: 1px">
</ha-icon>${
states['sensor.neil_iphone_home_distance'].state
}`
]]]
traveltime: |
[[[
if (states['sensor.neil_iphone_travel_time'].state == 0)
return ""
else return `<ha-icon
icon="mdi:timelapse"
style="width: 16px; height: 16px; vertical-align: 1px">
</ha-icon>${
states['sensor.neil_iphone_travel_time'].state
}`
]]]
entity: person.neil
show_entity_picture: true
entity_picture: /local/neil1.gif
show_name: true
show_last_changed: true
show_icon: true
triggers_update: all
show_state: '[[show_state]]'
styles:
name:
- font-size: 10px
label:
- font-size: 8px
custom_fields:
distance:
- position: absolute
- left: 2%
- top: 2%
- font-size: 12px
traveltime:
- position: absolute
- left: 2%
- top: 20%
- font-size: 12px
battery:
- align-self: right
- position: absolute
- right: 2%
- top: 2%
- font-size: 12px
- color: >-
[[[ if (states["sensor.neil_iphone_battery"].state < 30) return
"#e45649"; if (states["sensor.neil_iphone_battery"].state < 50) return
"#ffa229"; if (states["sensor.neil_iphone_battery"].state < 101)
return "#50A14F"; else return "#ffc640"]]]
icon:
- width: 90%
- position: absolute
- top: 20%```