Widget:PileIconMaker

<style> .pileIcon, .pileIcon * { box-sizing: border-box; }

.pileIcon { position: relative; width: var(--size); height: var(--size); overflow: hidden; }

.pileIcon > .layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; }

.pileIcon > .layer.fully > * { width: 100%; height: 100%; }

.pileIcon > .layer.mobile[data-pos-h="left"] { justify-content: flex-start; }

.pileIcon > .layer.mobile[data-pos-h="center"] { justify-content: center; }

.pileIcon > .layer.mobile[data-pos-h="right"] { justify-content: flex-end; }

.pileIcon > .layer.mobile[data-pos-v="top"] { align-items: flex-start; }

.pileIcon > .layer.mobile[data-pos-v="center"] { align-items: center; }

.pileIcon > .layer.mobile[data-pos-v="bottom"] { align-items: flex-end; } </style>