I'm designing a vertical responsive timeline for a health-tech company, and the timeline is supposed to show different "events" throughout a patient's physical rehab program, each being represented by interactive cards. To emphasize the difference between cards/content, we're using icons (see image). The issue arises with the icon placement. I tried placing them in front of the bold text, as they're related to that content, but it just looks kind of awkward visually, plus it doesn't work well responsively with mobile. As a possible fix, i put the icons on the top right of the cards (see image), which works well responsively, but I didn't know if that would create a problem with how patients relate the information in the text with the meaning of the icons - especially when the cards are in their larger desktop version, with more white space separating the title and icon. Does that make sense? Appreciate any thoughts/feedback!
Could you integrate the icons into the orange circle you have on the left? That way the user can scan their time-line for icons of interest a bit quicker. That or left align it next to the date and title. It should fit snugly next to both those. (instead of just the title as suggested).
Edit: furthermore try to the left of the entire card in between the card and orange circle.