JSFiddle - React, Tailwind, and code Playground

HTML

<accent>
	<left>A</left>
	<box><icon></icon></box>
	<right>B</right>
</accent>

CSS

html{background: white}
accent {
		display: block;
		position: relative;
		margin-top: 100px;
}
accent::before {
 	 content: '';
 	 position: absolute;
 	 left: 0; right: 0;
 	 top: 50%; height: 1px;
  	background: red;
}
left, right{
	  position: absolute;
	  top: -15px;
}
left{left: 0}
right{right: 0}

box {
	background:url(https://s3-us-west-2.amazonaws.com/appdirect-assets/Blog%20Images/Content/2011/SVG-icons.png) no-repeat;
	background-position: -4px -6px;
		display: block;
 	 position: relative;
 	 margin: 0 auto;
		width:52px;
		height:52px;

	background-size:contain;
		border: 1px solid white;
		outline: 1px solid red;
}