iOS Glyph Icons In A CSS Image Sprite – shortcut-icons.css

Preview:

Description:

shortcut-icons.css is a CSS library that enables you to add iOS glyph icons (iOS 14, 13, or 12) to the webpage using CSS image sprite technology.

How to use it:

1. Upload the iOS glyph CSS image sprite to the server.

// iOS 12 glyphs
ios12-glyphs.png
// iOS 13 glyphs
ios13-glyphs.png
// iOS 14 glyphs
ios14-glyphs.png

2. Load the shortcut-icons.css in the document.

<link rel="stylesheet" href="shortcut-icons.css" />

3. Insert iOS glyphs into the webpage using a single DIV element as follows:

• .s43: 43x43px
• .s64: 64x64px
• .s86: 86x86px
• .s128: 128x128px

// iOS 14
<div class="shortcut-icon c4282601983 g59460 s64 " title="shortcut-icon c4282601983 g59460 s64 "></div>
<div class="shortcut-icon c4274264319 g61482 s86 " title="shortcut-icon c4274264319 g61482 s86 "></div>
<div class="shortcut-icon c2846468607 g61464 s43 " title="shortcut-icon c2846468607 g61464 s43 "></div>
<div class="shortcut-icon c4292093695 g59670 s64 " title="shortcut-icon c4292093695 g59670 s64 "></div>
<div class="shortcut-icon c3031607807 g61502 s128" title="shortcut-icon c3031607807 g61502 s128"></div>
<div class="shortcut-icon c3679049983 g59736 s64 " title="shortcut-icon c3679049983 g59736 s64 "></div>
<div class="shortcut-icon c431817727 g59494 s43 " title="shortcut-icon c431817727 g59494 s43 "></div>
<div class="shortcut-icon c3980825855 g59752 s128" title="shortcut-icon c3980825855 g59752 s128"></div>
<div class="shortcut-icon c2071128575 g59498 s43 " title="shortcut-icon c2071128575 g59498 s43 "></div>
<div class="shortcut-icon c1440408063 g61487 s43 " title="shortcut-icon c1440408063 g61487 s43 "></div>
<div class="shortcut-icon c4271458815 g59826 s64 " title="shortcut-icon c4271458815 g59826 s64 "></div>
<div class="shortcut-icon g59738 s128" title="shortcut-icon g59738 s128"></div>
<div class="shortcut-icon c431817727 g59657 s64 " title="shortcut-icon c431817727 g59657 s64 "></div>
<div class="shortcut-icon c4292093695 g59745 s86 " title="shortcut-icon c4292093695 g59745 s86 "></div>
<div class="shortcut-icon c4282601983 g59414 s86 " title="shortcut-icon c4271458815 g59414 s86 "></div>
<div class="shortcut-icon c4274264319 g59719 s128" title="shortcut-icon c4274264319 g59719 s128"></div>
<div class="shortcut-icon c1440408063 g59773 s86 " title="shortcut-icon c1440408063 g59773 s86 "></div>
<div class="shortcut-icon c946986751 g59729 s128" title="shortcut-icon c946986751 g59729 s128"></div>
<div class="shortcut-icon c255 g59770 s64 " title="shortcut-icon c255 g59770 s64 "></div>
<div class="shortcut-icon c3679049983 g61465 s86 " title="shortcut-icon c3679049983 g61465 s86 "></div>
<div class="shortcut-icon c4251333119 g59679 s43 " title="shortcut-icon c4251333119 g59679 s43 "></div>
<div class="shortcut-icon c255 g59661 s86 " title="shortcut-icon c255 g59661 s86 "></div>
<div class="shortcut-icon c463140863 g59751 s128" title="shortcut-icon c463140863 g59751 s128"></div>
<div class="shortcut-icon c4274264319 g59763 s64 " title="shortcut-icon c463140863 g59763 s64 "></div>
<div class="shortcut-icon c2071128575 g61447 s128" title="shortcut-icon c2071128575 g61447 s128"></div>
<div class="shortcut-icon c3980825855 g59771 s86 " title="shortcut-icon c3980825855 g59771 s86 "></div>
<div class="shortcut-icon c4274264319 g59662 s43 " title="shortcut-icon c4274264319 g59662 s43 "></div>
<div class="shortcut-icon c4282601983 s64 " title="shortcut-icon c4282601983 s64 "></div>
<div class="shortcut-icon c2071128575 g59787 s86 " title="shortcut-icon c2071128575 g59787 s86 "></div>
<div class="shortcut-icon c3031607807 g59861 s43 " title="shortcut-icon c3031607807 g59861 s43 "></div>
<div class="shortcut-icon c4282601983 g59511 s128" title="shortcut-icon c4282601983 g59511 s128"></div>
<div class="shortcut-icon c463140863 g59710 s86 " title="shortcut-icon c463140863 g59710 s86 "></div>
<div class="shortcut-icon g59649 s86 " title="shortcut-icon g59649 s86 "></div>
<div class="shortcut-icon c463140863 g61519 s43 " title="shortcut-icon c463140863 g61519 s43 "></div>
<div class="shortcut-icon c255 g59830 s128" title="shortcut-icon c255 g59830 s128"></div>
<div class="shortcut-icon c4271458815 g59794 s86 " title="shortcut-icon c4282601983 g59794 s86 "></div>
<div class="shortcut-icon c946986751 g59412 s86 " title="shortcut-icon c946986751 g59412 s86 "></div>
<div class="shortcut-icon c946986751 g59696 s43 " title="shortcut-icon c946986751 g59696 s43 "></div>
<div class="shortcut-icon c4271458815 g59712 s64 " title="shortcut-icon c4271458815 g59712 s64 "></div>
<div class="shortcut-icon c4292093695 g61529 s43 " title="shortcut-icon c4292093695 g61529 s43 "></div>
<div class="shortcut-icon c2071128575 g61505 s64 " title="shortcut-icon c2071128575 g61505 s64 "></div>
<div class="shortcut-icon c3031607807 g59820 s86 " title="shortcut-icon c3031607807 g59820 s86 "></div>
<div class="shortcut-icon c463140863 g61520 s64 " title="shortcut-icon c463140863 g61520 s64 "></div>
<div class="shortcut-icon c1440408063 g59460 s64 " title="shortcut-icon c1440408063 g59460 s64 "></div>
<div class="shortcut-icon c3980825855 g59852 s43 " title="shortcut-icon c3980825855 g59852 s43 "></div>
<div class="shortcut-icon c463140863 g59704 s64 " title="shortcut-icon c463140863 g59704 s64 "></div>
<div class="shortcut-icon c431817727 g59703 s86 " title="shortcut-icon c431817727 g59703 s86 "></div>
<div class="shortcut-icon c4251333119 g59679 s86 " title="shortcut-icon c4251333119 g59679 s86 "></div>
<div class="shortcut-icon s64 " title="shortcut-icon s64 "></div>
<div class="shortcut-icon c255 g61440 s43 " title="shortcut-icon c255 g61440 s43 "></div>
<div class="shortcut-icon c3031607807 g61499 s64 " title="shortcut-icon c3031607807 g61499 s64 "></div>
<div class="shortcut-icon c2846468607 g59454 s64 " title="shortcut-icon c2846468607 g59454 s64 "></div>
<div class="shortcut-icon c2071128575 g59726 s64 " title="shortcut-icon c2071128575 g59726 s64 "></div>
<div class="shortcut-icon c2846468607 g59761 s86 " title="shortcut-icon c2846468607 g59761 s86 "></div>
<div class="shortcut-icon c4271458815 g59514 s43 " title="shortcut-icon c4271458815 g59514 s43 "></div>
<div class="shortcut-icon c4251333119 g59402 s128" title="shortcut-icon c4251333119 g59402 s128"></div>
<div class="shortcut-icon c3679049983 g59445 s43 " title="shortcut-icon c3679049983 g59445 s43 "></div>
<div class="shortcut-icon g61446 s86 " title="shortcut-icon g61446 s86 "></div>
<div class="shortcut-icon c4282601983 g59793 s43 " title="shortcut-icon c4282601983 g59793 s43 "></div>
<div class="shortcut-icon c3980825855 g61476 s64 " title="shortcut-icon c3980825855 g61476 s64 "></div>
// iOS 13
<div class="ios13 shortcut-icon c4282601983 g59460 s64 " title="ios13 shortcut-icon c4282601983 g59460 s64 "></div>
<div class="ios13 shortcut-icon c4274264319 g61482 s86 " title="ios13 shortcut-icon c4274264319 g61482 s86 "></div>
<div class="ios13 shortcut-icon c2846468607 g61464 s43 " title="ios13 shortcut-icon c2846468607 g61464 s43 "></div>
<div class="ios13 shortcut-icon c4292093695 g59670 s64 " title="ios13 shortcut-icon c4292093695 g59670 s64 "></div>
<div class="ios13 shortcut-icon c3031607807 g61502 s128" title="ios13 shortcut-icon c3031607807 g61502 s128"></div>
<div class="ios13 shortcut-icon c3679049983 g59736 s64 " title="ios13 shortcut-icon c3679049983 g59736 s64 "></div>
<div class="ios13 shortcut-icon c431817727 g59494 s43 " title="ios13 shortcut-icon c431817727 g59494 s43 "></div>
<div class="ios13 shortcut-icon c3980825855 g59752 s128" title="ios13 shortcut-icon c3980825855 g59752 s128"></div>
<div class="ios13 shortcut-icon c2071128575 g59498 s43 " title="ios13 shortcut-icon c2071128575 g59498 s43 "></div>
<div class="ios13 shortcut-icon c1440408063 g61487 s43 " title="ios13 shortcut-icon c1440408063 g61487 s43 "></div>
<div class="ios13 shortcut-icon c4271458815 g59826 s64 " title="ios13 shortcut-icon c4271458815 g59826 s64 "></div>
<div class="ios13 shortcut-icon g59738 s128" title="ios13 shortcut-icon g59738 s128"></div>
<div class="ios13 shortcut-icon c431817727 g59657 s64 " title="ios13 shortcut-icon c431817727 g59657 s64 "></div>
<div class="ios13 shortcut-icon c4292093695 g59745 s86 " title="ios13 shortcut-icon c4292093695 g59745 s86 "></div>
<div class="ios13 shortcut-icon c4282601983 g59414 s86 " title="ios13 shortcut-icon c4271458815 g59414 s86 "></div>
<div class="ios13 shortcut-icon c4274264319 g59719 s128" title="ios13 shortcut-icon c4274264319 g59719 s128"></div>
<div class="ios13 shortcut-icon c1440408063 g59773 s86 " title="ios13 shortcut-icon c1440408063 g59773 s86 "></div>
<div class="ios13 shortcut-icon c946986751 g59729 s128" title="ios13 shortcut-icon c946986751 g59729 s128"></div>
<div class="ios13 shortcut-icon c255 g59770 s64 " title="ios13 shortcut-icon c255 g59770 s64 "></div>
<div class="ios13 shortcut-icon c3679049983 g61465 s86 " title="ios13 shortcut-icon c3679049983 g61465 s86 "></div>
<div class="ios13 shortcut-icon c4251333119 g59679 s43 " title="ios13 shortcut-icon c4251333119 g59679 s43 "></div>
<div class="ios13 shortcut-icon c255 g59661 s86 " title="ios13 shortcut-icon c255 g59661 s86 "></div>
<div class="ios13 shortcut-icon c463140863 g59751 s128" title="ios13 shortcut-icon c463140863 g59751 s128"></div>
<div class="ios13 shortcut-icon c4274264319 g59763 s64 " title="ios13 shortcut-icon c463140863 g59763 s64 "></div>
<div class="ios13 shortcut-icon c2071128575 g61447 s128" title="ios13 shortcut-icon c2071128575 g61447 s128"></div>
<div class="ios13 shortcut-icon c3980825855 g59771 s86 " title="ios13 shortcut-icon c3980825855 g59771 s86 "></div>
<div class="ios13 shortcut-icon c4274264319 g59662 s43 " title="ios13 shortcut-icon c4274264319 g59662 s43 "></div>
<div class="ios13 shortcut-icon c4282601983 s64 " title="ios13 shortcut-icon c4282601983 s64 "></div>
<div class="ios13 shortcut-icon c2071128575 g59787 s86 " title="ios13 shortcut-icon c2071128575 g59787 s86 "></div>
<div class="ios13 shortcut-icon c3031607807 g59861 s43 " title="ios13 shortcut-icon c3031607807 g59861 s43 "></div>
<div class="ios13 shortcut-icon c4282601983 g59511 s128" title="ios13 shortcut-icon c4282601983 g59511 s128"></div>
<div class="ios13 shortcut-icon c463140863 g59710 s86 " title="ios13 shortcut-icon c463140863 g59710 s86 "></div>
<div class="ios13 shortcut-icon g59649 s86 " title="ios13 shortcut-icon g59649 s86 "></div>
<div class="ios13 shortcut-icon c463140863 g61519 s43 " title="ios13 shortcut-icon c463140863 g61519 s43 "></div>
<div class="ios13 shortcut-icon c255 g59830 s128" title="ios13 shortcut-icon c255 g59830 s128"></div>
<div class="ios13 shortcut-icon c4271458815 g59794 s86 " title="ios13 shortcut-icon c4282601983 g59794 s86 "></div>
<div class="ios13 shortcut-icon c946986751 g59412 s86 " title="ios13 shortcut-icon c946986751 g59412 s86 "></div>
<div class="ios13 shortcut-icon c946986751 g59696 s43 " title="ios13 shortcut-icon c946986751 g59696 s43 "></div>
<div class="ios13 shortcut-icon c4271458815 g59712 s64 " title="ios13 shortcut-icon c4271458815 g59712 s64 "></div>
<div class="ios13 shortcut-icon c4292093695 g61529 s43 " title="ios13 shortcut-icon c4292093695 g61529 s43 "></div>
<div class="ios13 shortcut-icon c2071128575 g61505 s64 " title="ios13 shortcut-icon c2071128575 g61505 s64 "></div>
<div class="ios13 shortcut-icon c3031607807 g59820 s86 " title="ios13 shortcut-icon c3031607807 g59820 s86 "></div>
<div class="ios13 shortcut-icon c463140863 g61520 s64 " title="ios13 shortcut-icon c463140863 g61520 s64 "></div>
<div class="ios13 shortcut-icon c1440408063 g59460 s64 " title="ios13 shortcut-icon c1440408063 g59460 s64 "></div>
<div class="ios13 shortcut-icon c3980825855 g59852 s43 " title="ios13 shortcut-icon c3980825855 g59852 s43 "></div>
<div class="ios13 shortcut-icon c463140863 g59704 s64 " title="ios13 shortcut-icon c463140863 g59704 s64 "></div>
<div class="ios13 shortcut-icon c431817727 g59703 s86 " title="ios13 shortcut-icon c431817727 g59703 s86 "></div>
<div class="ios13 shortcut-icon c4251333119 g59679 s86 " title="ios13 shortcut-icon c4251333119 g59679 s86 "></div>
<div class="ios13 shortcut-icon s64 " title="ios13 shortcut-icon s64 "></div>
<div class="ios13 shortcut-icon c255 g61440 s43 " title="ios13 shortcut-icon c255 g61440 s43 "></div>
<div class="ios13 shortcut-icon c3031607807 g61499 s64 " title="ios13 shortcut-icon c3031607807 g61499 s64 "></div>
<div class="ios13 shortcut-icon c2846468607 g59454 s64 " title="ios13 shortcut-icon c2846468607 g59454 s64 "></div>
<div class="ios13 shortcut-icon c2071128575 g59726 s64 " title="ios13 shortcut-icon c2071128575 g59726 s64 "></div>
<div class="ios13 shortcut-icon c2846468607 g59761 s86 " title="ios13 shortcut-icon c2846468607 g59761 s86 "></div>
<div class="ios13 shortcut-icon c4271458815 g59514 s43 " title="ios13 shortcut-icon c4271458815 g59514 s43 "></div>
<div class="ios13 shortcut-icon c4251333119 g59402 s128" title="ios13 shortcut-icon c4251333119 g59402 s128"></div>
<div class="ios13 shortcut-icon c3679049983 g59445 s43 " title="ios13 shortcut-icon c3679049983 g59445 s43 "></div>
<div class="ios13 shortcut-icon g61446 s86 " title="ios13 shortcut-icon g61446 s86 "></div>
<div class="ios13 shortcut-icon c3980825855 g61476 s64 " title="ios13 shortcut-icon c3980825855 g61476 s64 "></div>
// iOS 12
<div class="ios12 shortcut-icon c4282601983 g59460 s64 " title="ios12 shortcut-icon c4282601983 g59460 s64 "></div>
<div class="ios12 shortcut-icon c4274264319 g61482 s86 " title="ios12 shortcut-icon c4274264319 g61482 s86 "></div>
<div class="ios12 shortcut-icon c2846468607 g61464 s43 " title="ios12 shortcut-icon c2846468607 g61464 s43 "></div>
<div class="ios12 shortcut-icon c4292093695 g59670 s64 " title="ios12 shortcut-icon c4292093695 g59670 s64 "></div>
<div class="ios12 shortcut-icon c3031607807 g61502 s128" title="ios12 shortcut-icon c3031607807 g61502 s128"></div>
<div class="ios12 shortcut-icon c3679049983 g59736 s64 " title="ios12 shortcut-icon c3679049983 g59736 s64 "></div>
<div class="ios12 shortcut-icon c431817727 g59494 s43 " title="ios12 shortcut-icon c431817727 g59494 s43 "></div>
<div class="ios12 shortcut-icon c3980825855 g59752 s128" title="ios12 shortcut-icon c3980825855 g59752 s128"></div>
<div class="ios12 shortcut-icon c2071128575 g59498 s43 " title="ios12 shortcut-icon c2071128575 g59498 s43 "></div>
<div class="ios12 shortcut-icon c1440408063 g61487 s43 " title="ios12 shortcut-icon c1440408063 g61487 s43 "></div>
<div class="ios12 shortcut-icon c4271458815 g59826 s64 " title="ios12 shortcut-icon c4271458815 g59826 s64 "></div>
<div class="ios12 shortcut-icon g59738 s128" title="ios12 shortcut-icon g59738 s128"></div>
<div class="ios12 shortcut-icon c431817727 g59657 s64 " title="ios12 shortcut-icon c431817727 g59657 s64 "></div>
<div class="ios12 shortcut-icon c4292093695 g59745 s86 " title="ios12 shortcut-icon c4292093695 g59745 s86 "></div>
<div class="ios12 shortcut-icon c4282601983 g59414 s86 " title="ios12 shortcut-icon c4271458815 g59414 s86 "></div>
<div class="ios12 shortcut-icon c4274264319 g59719 s128" title="ios12 shortcut-icon c4274264319 g59719 s128"></div>
<div class="ios12 shortcut-icon c1440408063 g59773 s86 " title="ios12 shortcut-icon c1440408063 g59773 s86 "></div>
<div class="ios12 shortcut-icon c946986751 g59729 s128" title="ios12 shortcut-icon c946986751 g59729 s128"></div>
<div class="ios12 shortcut-icon c255 g59770 s64 " title="ios12 shortcut-icon c255 g59770 s64 "></div>
<div class="ios12 shortcut-icon c3679049983 g61465 s86 " title="ios12 shortcut-icon c3679049983 g61465 s86 "></div>
<div class="ios12 shortcut-icon c4251333119 g59679 s43 " title="ios12 shortcut-icon c4251333119 g59679 s43 "></div>
<div class="ios12 shortcut-icon c255 g59661 s86 " title="ios12 shortcut-icon c255 g59661 s86 "></div>
<div class="ios12 shortcut-icon c463140863 g59751 s128" title="ios12 shortcut-icon c463140863 g59751 s128"></div>
<div class="ios12 shortcut-icon c4274264319 g59763 s64 " title="ios12 shortcut-icon c463140863 g59763 s64 "></div>
<div class="ios12 shortcut-icon c2071128575 g61447 s128" title="ios12 shortcut-icon c2071128575 g61447 s128"></div>
<div class="ios12 shortcut-icon c3980825855 g59771 s86 " title="ios12 shortcut-icon c3980825855 g59771 s86 "></div>
<div class="ios12 shortcut-icon c4274264319 g59662 s43 " title="ios12 shortcut-icon c4274264319 g59662 s43 "></div>
<div class="ios12 shortcut-icon c4282601983 s64 " title="ios12 shortcut-icon c4282601983 s64 "></div>
<div class="ios12 shortcut-icon c2071128575 g59787 s86 " title="ios12 shortcut-icon c2071128575 g59787 s86 "></div>
<div class="ios12 shortcut-icon c3031607807 g59861 s43 " title="ios12 shortcut-icon c3031607807 g59861 s43 "></div>
<div class="ios12 shortcut-icon c4282601983 g59511 s128" title="ios12 shortcut-icon c4282601983 g59511 s128"></div>
<div class="ios12 shortcut-icon c463140863 g59710 s86 " title="ios12 shortcut-icon c463140863 g59710 s86 "></div>
<div class="ios12 shortcut-icon g59649 s86 " title="ios12 shortcut-icon g59649 s86 "></div>
<div class="ios12 shortcut-icon c463140863 g61519 s43 " title="ios12 shortcut-icon c463140863 g61519 s43 "></div>
<div class="ios12 shortcut-icon c255 g59830 s128" title="ios12 shortcut-icon c255 g59830 s128"></div>
<div class="ios12 shortcut-icon c4271458815 g59794 s86 " title="ios12 shortcut-icon c4282601983 g59794 s86 "></div>
<div class="ios12 shortcut-icon c946986751 g59412 s86 " title="ios12 shortcut-icon c946986751 g59412 s86 "></div>
<div class="ios12 shortcut-icon c946986751 g59696 s43 " title="ios12 shortcut-icon c946986751 g59696 s43 "></div>
<div class="ios12 shortcut-icon c4271458815 g59712 s64 " title="ios12 shortcut-icon c4271458815 g59712 s64 "></div>
<div class="ios12 shortcut-icon c4292093695 g61529 s43 " title="ios12 shortcut-icon c4292093695 g61529 s43 "></div>
<div class="ios12 shortcut-icon c2071128575 g61505 s64 " title="ios12 shortcut-icon c2071128575 g61505 s64 "></div>
<div class="ios12 shortcut-icon c3031607807 g59820 s86 " title="ios12 shortcut-icon c3031607807 g59820 s86 "></div>
<div class="ios12 shortcut-icon c463140863 g61520 s64 " title="ios12 shortcut-icon c463140863 g61520 s64 "></div>
<div class="ios12 shortcut-icon c1440408063 g59460 s64 " title="ios12 shortcut-icon c1440408063 g59460 s64 "></div>
<div class="ios12 shortcut-icon c3980825855 g59852 s43 " title="ios12 shortcut-icon c3980825855 g59852 s43 "></div>
<div class="ios12 shortcut-icon c463140863 g59704 s64 " title="ios12 shortcut-icon c463140863 g59704 s64 "></div>
<div class="ios12 shortcut-icon c431817727 g59703 s86 " title="ios12 shortcut-icon c431817727 g59703 s86 "></div>
<div class="ios12 shortcut-icon c4251333119 g59679 s86 " title="ios12 shortcut-icon c4251333119 g59679 s86 "></div>
<div class="ios12 shortcut-icon s64 " title="ios12 shortcut-icon s64 "></div>
<div class="ios12 shortcut-icon c255 g61440 s43 " title="ios12 shortcut-icon c255 g61440 s43 "></div>
<div class="ios12 shortcut-icon c3031607807 g61499 s64 " title="ios12 shortcut-icon c3031607807 g61499 s64 "></div>
<div class="ios12 shortcut-icon c2846468607 g59454 s64 " title="ios12 shortcut-icon c2846468607 g59454 s64 "></div>
<div class="ios12 shortcut-icon c2071128575 g59726 s64 " title="ios12 shortcut-icon c2071128575 g59726 s64 "></div>
<div class="ios12 shortcut-icon c2846468607 g59761 s86 " title="ios12 shortcut-icon c2846468607 g59761 s86 "></div>
<div class="ios12 shortcut-icon c4271458815 g59514 s43 " title="ios12 shortcut-icon c4271458815 g59514 s43 "></div>
<div class="ios12 shortcut-icon c4251333119 g59402 s128" title="ios12 shortcut-icon c4251333119 g59402 s128"></div>
<div class="ios12 shortcut-icon c3679049983 g59445 s43 " title="ios12 shortcut-icon c3679049983 g59445 s43 "></div>
<div class="ios12 shortcut-icon g61446 s86 " title="ios12 shortcut-icon g61446 s86 "></div>
<div class="ios12 shortcut-icon c4282601983 g59793 s43 " title="ios12 shortcut-icon c4282601983 g59793 s43 "></div>
<div class="ios12 shortcut-icon c3980825855 g61476 s64 " title="ios12 shortcut-icon c3980825855 g61476 s64 "></div>

4. Override the default styles of the iOS glyphs.

.shortcut-icon {
  /* SVG partial icon grid and gray background color, visible only if no color class is used */
  background-color: #7F7F7F7F;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke="white" fill="none" stroke-width="0.5"><line x1="0%" y1="0%" x2="19.2%" y2="19.2%"/><line x1="80.8%" y1="80.8%" x2="100%" y2="100%"/><line x1="0%" y1="100%" x2="19.2%" y2="80.8%"/><line x1="80.8%" y1="19.2%" x2="100%" y2="0%"/><line x1="0%" y1="6%" x2="100%" y2="6%"/><line x1="0%" y1="31.5%" x2="15%" y2="31.5%"/><line x1="85%" y1="31.5%" x2="100%" y2="31.5%"/><line x1="0%" y1="50%" x2="15%" y2="50%"/><line x1="85%" y1="50%" x2="100%" y2="50%"/><line x1="0%" y1="68.5%" x2="15%" y2="68.5%"/><line x1="85%" y1="68.5%" x2="100%" y2="68.5%"/><line x1="0%" y1="94%" x2="100%" y2="94%"/><line x1="6%" y1="0%" x2="6%" y2="100%"/><line x1="31.5%" y1="0%" x2="31.5%" y2="15%"/><line x1="31.5%" y1="85%" x2="31.5%" y2="100%"/><line x1="50%" y1="0%" x2="50%" y2="15%"/><line x1="50%" y1="85%" x2="50%" y2="100%"/><line x1="68.5%" y1="0%" x2="68.5%" y2="15%"/><line x1="68.5%" y1="85%" x2="68.5%" y2="100%"/><line x1="94%" y1="0%" x2="94%" y2="100%"/><circle cx="50%" cy="50%" r="44%"/></svg>');
  /* iCloud link icons show a radius/size ratio of 1/6, although the closest ratio of iOS app icons is 2/9 */
  border-radius: calc(var(--icon-size) / 6);
  /* shadow imitates the appearance of iCloud link icons */
  box-shadow: 0 calc(var(--icon-size) / 64) calc(var(--icon-size) / 32) 0 rgba(0, 0, 0, .14);
  box-sizing: border-box;
  display: inline-block;
  height: var(--icon-size);
  /* padding equivalent to 38/256, leaving 180/256 for the content */
  padding: calc(var(--icon-size) / 6.7368421);
  width: var(--icon-size);
}