Skeleton Placeholder Icon
Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.
The Skeleton Placeholder icon is available as a free SVG and is ready to drop into any web or app project.
img tag
<img src="https://proicons.com/icon/321108.svg" alt="Skeleton Placeholder icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/321108.svg" alt="Skeleton Placeholder icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/321108.svg" alt="Skeleton Placeholder icon" :width="24" :height="24" />
CSS background
.icon-skeleton-placeholder {
background-image: url('https://proicons.com/icon/321108.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton-placeholder</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton-placeholder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="118" y="48" width="85" height="85"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="117" y="48" width="56.4662577" height="85"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(177.733129, 90.500000) scale(-1, 1) translate(-177.733129, -90.500000) " x="173.466258" y="48" width="8.533742" height="85"></rect>
</g>
</svg>
Copied!