3e:null 3f:["$","title",null,{"children":"SVG icon alignment | Mara Averick | Observable"}] 45:Ta28,

Based on Elliot Dahl's blog post about SVG icon system alignment (on using inline SVG icons in place of icon fonts). Code forked from Dahl's CodePen, SVG Icon Alignment Example.

48px ABC

xyz

32px ABC

xyz

24px ABC

xyz

16px ABC

xyz

12px ABC

xyz

46:T589,style = html``47:[] 43:{"id":"1cf3461f8165e69b","slug":null,"title":"SVG icon alignment","thumbnail":"342df68eef240da9ec2814661da0b9e3467a81c0704fa252b5fac7dde898061a","access_level":"public","create_time":"$D2023-06-07T12:11:51.499Z","update_time":"$D2023-06-07T13:51:46.646Z","view_time":null,"first_public_time":"$D2023-06-07T12:11:51.499Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"634a12ef4a7ca2ae","login":"batpigandme","name":"Mara Averick","avatar_url":"https://avatars-next.observableusercontent.com/cc8d06946af8fa9888cd40cd20c8db3765e4b2963364adcd08b90010e3a12123","tier":"starter_2024","bio":"","following":false},"version":20,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"03c4d389ad2448ed","login":"batpigandme","name":"Mara Averick","avatar_url":"https://avatars-next.observableusercontent.com/cc8d06946af8fa9888cd40cd20c8db3765e4b2963364adcd08b90010e3a12123","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"03c4d389ad2448ed","login":"batpigandme","name":"Mara Averick","avatar_url":"https://avatars-next.observableusercontent.com/cc8d06946af8fa9888cd40cd20c8db3765e4b2963364adcd08b90010e3a12123","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG icon alignment","cells":[{"id":0,"value":"# SVG icon alignment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"title","database":"$undefined"},{"id":10,"value":"$45","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"

48px ABC xyz

32px ABC xyz

24px ABC xyz

16px ABC xyz

12px ABC xyz