photon-ant
Version:
Mozilla Photon styles for the Ant Design UI library
728 lines (626 loc) • 29.9 kB
HTML
<html>
<head>
<title>Photon Icons</title>
<link rel="stylesheet" href="../index.css" type="text/css">
<style type="text/css">
body { display: flex; flex-wrap: wrap; }
div {
flex-basis: 30%;
margin-bottom: 2em;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
display: flex;
}
div h2 { font-size: 14px; display: block; text-align: center; }
span { margin-bottom: 16px; font-size: 48px; font-family: "photon-icons"; display: block; text-align: center; }
span + span { font-size: 24px; opacity: 0.1 }
span + span + span { font-size: 12px; opacity: 0.1 }
div:hover span,
div:focus span { opacity: 1; }
</style>
</head>
<body>
<div>
<span title="arrow-forward - 48px" class="photon-icon-arrow-forward"></span>
<span title="arrow-forward - 24px" class="photon-icon-arrow-forward"></span>
<span title="arrow-forward - 12px" class="photon-icon-arrow-forward"></span>
<h2>arrow-forward</h2>
</div>
<div>
<span title="arrow-left - 48px" class="photon-icon-arrow-left"></span>
<span title="arrow-left - 24px" class="photon-icon-arrow-left"></span>
<span title="arrow-left - 12px" class="photon-icon-arrow-left"></span>
<h2>arrow-left</h2>
</div>
<div>
<span title="arrowhead-down-bold - 48px" class="photon-icon-arrowhead-down-bold"></span>
<span title="arrowhead-down-bold - 24px" class="photon-icon-arrowhead-down-bold"></span>
<span title="arrowhead-down-bold - 12px" class="photon-icon-arrowhead-down-bold"></span>
<h2>arrowhead-down-bold</h2>
</div>
<div>
<span title="arrowhead-down - 48px" class="photon-icon-arrowhead-down"></span>
<span title="arrowhead-down - 24px" class="photon-icon-arrowhead-down"></span>
<span title="arrowhead-down - 12px" class="photon-icon-arrowhead-down"></span>
<h2>arrowhead-down</h2>
</div>
<div>
<span title="arrowhead-left-bold - 48px" class="photon-icon-arrowhead-left-bold"></span>
<span title="arrowhead-left-bold - 24px" class="photon-icon-arrowhead-left-bold"></span>
<span title="arrowhead-left-bold - 12px" class="photon-icon-arrowhead-left-bold"></span>
<h2>arrowhead-left-bold</h2>
</div>
<div>
<span title="arrowhead-left - 48px" class="photon-icon-arrowhead-left"></span>
<span title="arrowhead-left - 24px" class="photon-icon-arrowhead-left"></span>
<span title="arrowhead-left - 12px" class="photon-icon-arrowhead-left"></span>
<h2>arrowhead-left</h2>
</div>
<div>
<span title="arrowhead-right-bold - 48px" class="photon-icon-arrowhead-right-bold"></span>
<span title="arrowhead-right-bold - 24px" class="photon-icon-arrowhead-right-bold"></span>
<span title="arrowhead-right-bold - 12px" class="photon-icon-arrowhead-right-bold"></span>
<h2>arrowhead-right-bold</h2>
</div>
<div>
<span title="arrowhead-right - 48px" class="photon-icon-arrowhead-right"></span>
<span title="arrowhead-right - 24px" class="photon-icon-arrowhead-right"></span>
<span title="arrowhead-right - 12px" class="photon-icon-arrowhead-right"></span>
<h2>arrowhead-right</h2>
</div>
<div>
<span title="arrowhead-up-bold - 48px" class="photon-icon-arrowhead-up-bold"></span>
<span title="arrowhead-up-bold - 24px" class="photon-icon-arrowhead-up-bold"></span>
<span title="arrowhead-up-bold - 12px" class="photon-icon-arrowhead-up-bold"></span>
<h2>arrowhead-up-bold</h2>
</div>
<div>
<span title="arrowhead-up - 48px" class="photon-icon-arrowhead-up"></span>
<span title="arrowhead-up - 24px" class="photon-icon-arrowhead-up"></span>
<span title="arrowhead-up - 12px" class="photon-icon-arrowhead-up"></span>
<h2>arrowhead-up</h2>
</div>
<div>
<span title="available-updates - 48px" class="photon-icon-available-updates"></span>
<span title="available-updates - 24px" class="photon-icon-available-updates"></span>
<span title="available-updates - 12px" class="photon-icon-available-updates"></span>
<h2>available-updates</h2>
</div>
<div>
<span title="check - 48px" class="photon-icon-check"></span>
<span title="check - 24px" class="photon-icon-check"></span>
<span title="check - 12px" class="photon-icon-check"></span>
<h2>check</h2>
</div>
<div>
<span title="clipboard - 48px" class="photon-icon-clipboard"></span>
<span title="clipboard - 24px" class="photon-icon-clipboard"></span>
<span title="clipboard - 12px" class="photon-icon-clipboard"></span>
<h2>clipboard</h2>
</div>
<div>
<span title="clock - 48px" class="photon-icon-clock"></span>
<span title="clock - 24px" class="photon-icon-clock"></span>
<span title="clock - 12px" class="photon-icon-clock"></span>
<h2>clock</h2>
</div>
<div>
<span title="close-bold - 48px" class="photon-icon-close-bold"></span>
<span title="close-bold - 24px" class="photon-icon-close-bold"></span>
<span title="close-bold - 12px" class="photon-icon-close-bold"></span>
<h2>close-bold</h2>
</div>
<div>
<span title="close - 48px" class="photon-icon-close"></span>
<span title="close - 24px" class="photon-icon-close"></span>
<span title="close - 12px" class="photon-icon-close"></span>
<h2>close</h2>
</div>
<div>
<span title="copy - 48px" class="photon-icon-copy"></span>
<span title="copy - 24px" class="photon-icon-copy"></span>
<span title="copy - 12px" class="photon-icon-copy"></span>
<h2>copy</h2>
</div>
<div>
<span title="cursor-disabled - 48px" class="photon-icon-cursor-disabled"></span>
<span title="cursor-disabled - 24px" class="photon-icon-cursor-disabled"></span>
<span title="cursor-disabled - 12px" class="photon-icon-cursor-disabled"></span>
<h2>cursor-disabled</h2>
</div>
<div>
<span title="cursor - 48px" class="photon-icon-cursor"></span>
<span title="cursor - 24px" class="photon-icon-cursor"></span>
<span title="cursor - 12px" class="photon-icon-cursor"></span>
<h2>cursor</h2>
</div>
<div>
<span title="cut - 48px" class="photon-icon-cut"></span>
<span title="cut - 24px" class="photon-icon-cut"></span>
<span title="cut - 12px" class="photon-icon-cut"></span>
<h2>cut</h2>
</div>
<div>
<span title="delete - 48px" class="photon-icon-delete"></span>
<span title="delete - 24px" class="photon-icon-delete"></span>
<span title="delete - 12px" class="photon-icon-delete"></span>
<h2>delete</h2>
</div>
<div>
<span title="double-arrow-right - 48px" class="photon-icon-double-arrow-right"></span>
<span title="double-arrow-right - 24px" class="photon-icon-double-arrow-right"></span>
<span title="double-arrow-right - 12px" class="photon-icon-double-arrow-right"></span>
<h2>double-arrow-right</h2>
</div>
<div>
<span title="download-a - 48px" class="photon-icon-download-a"></span>
<span title="download-a - 24px" class="photon-icon-download-a"></span>
<span title="download-a - 12px" class="photon-icon-download-a"></span>
<h2>download-a</h2>
</div>
<div>
<span title="download - 48px" class="photon-icon-download"></span>
<span title="download - 24px" class="photon-icon-download"></span>
<span title="download - 12px" class="photon-icon-download"></span>
<h2>download</h2>
</div>
<div>
<span title="ellipsis - 48px" class="photon-icon-ellipsis"></span>
<span title="ellipsis - 24px" class="photon-icon-ellipsis"></span>
<span title="ellipsis - 12px" class="photon-icon-ellipsis"></span>
<h2>ellipsis</h2>
</div>
<div>
<span title="experiment - 48px" class="photon-icon-experiment"></span>
<span title="experiment - 24px" class="photon-icon-experiment"></span>
<span title="experiment - 12px" class="photon-icon-experiment"></span>
<h2>experiment</h2>
</div>
<div>
<span title="extension-update - 48px" class="photon-icon-extension-update"></span>
<span title="extension-update - 24px" class="photon-icon-extension-update"></span>
<span title="extension-update - 12px" class="photon-icon-extension-update"></span>
<h2>extension-update</h2>
</div>
<div>
<span title="extension - 48px" class="photon-icon-extension"></span>
<span title="extension - 24px" class="photon-icon-extension"></span>
<span title="extension - 12px" class="photon-icon-extension"></span>
<h2>extension</h2>
</div>
<div>
<span title="firefox - 48px" class="photon-icon-firefox"></span>
<span title="firefox - 24px" class="photon-icon-firefox"></span>
<span title="firefox - 12px" class="photon-icon-firefox"></span>
<h2>firefox</h2>
</div>
<div>
<span title="folder - 48px" class="photon-icon-folder"></span>
<span title="folder - 24px" class="photon-icon-folder"></span>
<span title="folder - 12px" class="photon-icon-folder"></span>
<h2>folder</h2>
</div>
<div>
<span title="forget - 48px" class="photon-icon-forget"></span>
<span title="forget - 24px" class="photon-icon-forget"></span>
<span title="forget - 12px" class="photon-icon-forget"></span>
<h2>forget</h2>
</div>
<div>
<span title="fullscreen-disabled - 48px" class="photon-icon-fullscreen-disabled"></span>
<span title="fullscreen-disabled - 24px" class="photon-icon-fullscreen-disabled"></span>
<span title="fullscreen-disabled - 12px" class="photon-icon-fullscreen-disabled"></span>
<h2>fullscreen-disabled</h2>
</div>
<div>
<span title="fullscreen-exit - 48px" class="photon-icon-fullscreen-exit"></span>
<span title="fullscreen-exit - 24px" class="photon-icon-fullscreen-exit"></span>
<span title="fullscreen-exit - 12px" class="photon-icon-fullscreen-exit"></span>
<h2>fullscreen-exit</h2>
</div>
<div>
<span title="fullscreen - 48px" class="photon-icon-fullscreen"></span>
<span title="fullscreen - 24px" class="photon-icon-fullscreen"></span>
<span title="fullscreen - 12px" class="photon-icon-fullscreen"></span>
<h2>fullscreen</h2>
</div>
<div>
<span title="help - 48px" class="photon-icon-help"></span>
<span title="help - 24px" class="photon-icon-help"></span>
<span title="help - 12px" class="photon-icon-help"></span>
<h2>help</h2>
</div>
<div>
<span title="home - 48px" class="photon-icon-home"></span>
<span title="home - 24px" class="photon-icon-home"></span>
<span title="home - 12px" class="photon-icon-home"></span>
<h2>home</h2>
</div>
<div>
<span title="info-hover - 48px" class="photon-icon-info-hover"></span>
<span title="info-hover - 24px" class="photon-icon-info-hover"></span>
<span title="info-hover - 12px" class="photon-icon-info-hover"></span>
<h2>info-hover</h2>
</div>
<div>
<span title="info-notice-hover - 48px" class="photon-icon-info-notice-hover"></span>
<span title="info-notice-hover - 24px" class="photon-icon-info-notice-hover"></span>
<span title="info-notice-hover - 12px" class="photon-icon-info-notice-hover"></span>
<h2>info-notice-hover</h2>
</div>
<div>
<span title="info-notice - 48px" class="photon-icon-info-notice"></span>
<span title="info-notice - 24px" class="photon-icon-info-notice"></span>
<span title="info-notice - 12px" class="photon-icon-info-notice"></span>
<h2>info-notice</h2>
</div>
<div>
<span title="info - 48px" class="photon-icon-info"></span>
<span title="info - 24px" class="photon-icon-info"></span>
<span title="info - 12px" class="photon-icon-info"></span>
<h2>info</h2>
</div>
<div>
<span title="key - 48px" class="photon-icon-key"></span>
<span title="key - 24px" class="photon-icon-key"></span>
<span title="key - 12px" class="photon-icon-key"></span>
<h2>key</h2>
</div>
<div>
<span title="laptop - 48px" class="photon-icon-laptop"></span>
<span title="laptop - 24px" class="photon-icon-laptop"></span>
<span title="laptop - 12px" class="photon-icon-laptop"></span>
<h2>laptop</h2>
</div>
<div>
<span title="legacy-extension - 48px" class="photon-icon-legacy-extension"></span>
<span title="legacy-extension - 24px" class="photon-icon-legacy-extension"></span>
<span title="legacy-extension - 12px" class="photon-icon-legacy-extension"></span>
<h2>legacy-extension</h2>
</div>
<div>
<span title="library - 48px" class="photon-icon-library"></span>
<span title="library - 24px" class="photon-icon-library"></span>
<span title="library - 12px" class="photon-icon-library"></span>
<h2>library</h2>
</div>
<div>
<span title="lightbulb - 48px" class="photon-icon-lightbulb"></span>
<span title="lightbulb - 24px" class="photon-icon-lightbulb"></span>
<span title="lightbulb - 12px" class="photon-icon-lightbulb"></span>
<h2>lightbulb</h2>
</div>
<div>
<span title="link - 48px" class="photon-icon-link"></span>
<span title="link - 24px" class="photon-icon-link"></span>
<span title="link - 12px" class="photon-icon-link"></span>
<h2>link</h2>
</div>
<div>
<span title="location-disabled-mac - 48px" class="photon-icon-location-disabled-mac"></span>
<span title="location-disabled-mac - 24px" class="photon-icon-location-disabled-mac"></span>
<span title="location-disabled-mac - 12px" class="photon-icon-location-disabled-mac"></span>
<h2>location-disabled-mac</h2>
</div>
<div>
<span title="location-disabled-win - 48px" class="photon-icon-location-disabled-win"></span>
<span title="location-disabled-win - 24px" class="photon-icon-location-disabled-win"></span>
<span title="location-disabled-win - 12px" class="photon-icon-location-disabled-win"></span>
<h2>location-disabled-win</h2>
</div>
<div>
<span title="location-disabled - 48px" class="photon-icon-location-disabled"></span>
<span title="location-disabled - 24px" class="photon-icon-location-disabled"></span>
<span title="location-disabled - 12px" class="photon-icon-location-disabled"></span>
<h2>location-disabled</h2>
</div>
<div>
<span title="location-mac - 48px" class="photon-icon-location-mac"></span>
<span title="location-mac - 24px" class="photon-icon-location-mac"></span>
<span title="location-mac - 12px" class="photon-icon-location-mac"></span>
<h2>location-mac</h2>
</div>
<div>
<span title="location-win - 48px" class="photon-icon-location-win"></span>
<span title="location-win - 24px" class="photon-icon-location-win"></span>
<span title="location-win - 12px" class="photon-icon-location-win"></span>
<h2>location-win</h2>
</div>
<div>
<span title="location - 48px" class="photon-icon-location"></span>
<span title="location - 24px" class="photon-icon-location"></span>
<span title="location - 12px" class="photon-icon-location"></span>
<h2>location</h2>
</div>
<div>
<span title="mail - 48px" class="photon-icon-mail"></span>
<span title="mail - 24px" class="photon-icon-mail"></span>
<span title="mail - 12px" class="photon-icon-mail"></span>
<h2>mail</h2>
</div>
<div>
<span title="menu - 48px" class="photon-icon-menu"></span>
<span title="menu - 24px" class="photon-icon-menu"></span>
<span title="menu - 12px" class="photon-icon-menu"></span>
<h2>menu</h2>
</div>
<div>
<span title="microphone-disabled - 48px" class="photon-icon-microphone-disabled"></span>
<span title="microphone-disabled - 24px" class="photon-icon-microphone-disabled"></span>
<span title="microphone-disabled - 12px" class="photon-icon-microphone-disabled"></span>
<h2>microphone-disabled</h2>
</div>
<div>
<span title="microphone - 48px" class="photon-icon-microphone"></span>
<span title="microphone - 24px" class="photon-icon-microphone"></span>
<span title="microphone - 12px" class="photon-icon-microphone"></span>
<h2>microphone</h2>
</div>
<div>
<span title="mobile - 48px" class="photon-icon-mobile"></span>
<span title="mobile - 24px" class="photon-icon-mobile"></span>
<span title="mobile - 12px" class="photon-icon-mobile"></span>
<h2>mobile</h2>
</div>
<div>
<span title="notification-disabled - 48px" class="photon-icon-notification-disabled"></span>
<span title="notification-disabled - 24px" class="photon-icon-notification-disabled"></span>
<span title="notification-disabled - 12px" class="photon-icon-notification-disabled"></span>
<h2>notification-disabled</h2>
</div>
<div>
<span title="open-dir - 48px" class="photon-icon-open-dir"></span>
<span title="open-dir - 24px" class="photon-icon-open-dir"></span>
<span title="open-dir - 12px" class="photon-icon-open-dir"></span>
<h2>open-dir</h2>
</div>
<div>
<span title="open-in-new - 48px" class="photon-icon-open-in-new"></span>
<span title="open-in-new - 24px" class="photon-icon-open-in-new"></span>
<span title="open-in-new - 12px" class="photon-icon-open-in-new"></span>
<h2>open-in-new</h2>
</div>
<div>
<span title="paintbrush - 48px" class="photon-icon-paintbrush"></span>
<span title="paintbrush - 24px" class="photon-icon-paintbrush"></span>
<span title="paintbrush - 12px" class="photon-icon-paintbrush"></span>
<h2>paintbrush</h2>
</div>
<div>
<span title="person - 48px" class="photon-icon-person"></span>
<span title="person - 24px" class="photon-icon-person"></span>
<span title="person - 12px" class="photon-icon-person"></span>
<h2>person</h2>
</div>
<div>
<span title="pin-outline - 48px" class="photon-icon-pin-outline"></span>
<span title="pin-outline - 24px" class="photon-icon-pin-outline"></span>
<span title="pin-outline - 12px" class="photon-icon-pin-outline"></span>
<h2>pin-outline</h2>
</div>
<div>
<span title="pin-remove - 48px" class="photon-icon-pin-remove"></span>
<span title="pin-remove - 24px" class="photon-icon-pin-remove"></span>
<span title="pin-remove - 12px" class="photon-icon-pin-remove"></span>
<h2>pin-remove</h2>
</div>
<div>
<span title="pin - 48px" class="photon-icon-pin"></span>
<span title="pin - 24px" class="photon-icon-pin"></span>
<span title="pin - 12px" class="photon-icon-pin"></span>
<h2>pin</h2>
</div>
<div>
<span title="plugin - 48px" class="photon-icon-plugin"></span>
<span title="plugin - 24px" class="photon-icon-plugin"></span>
<span title="plugin - 12px" class="photon-icon-plugin"></span>
<h2>plugin</h2>
</div>
<div>
<span title="plus - 48px" class="photon-icon-plus"></span>
<span title="plus - 24px" class="photon-icon-plus"></span>
<span title="plus - 12px" class="photon-icon-plus"></span>
<h2>plus</h2>
</div>
<div>
<span title="pocket-list - 48px" class="photon-icon-pocket-list"></span>
<span title="pocket-list - 24px" class="photon-icon-pocket-list"></span>
<span title="pocket-list - 12px" class="photon-icon-pocket-list"></span>
<h2>pocket-list</h2>
</div>
<div>
<span title="pocket - 48px" class="photon-icon-pocket"></span>
<span title="pocket - 24px" class="photon-icon-pocket"></span>
<span title="pocket - 12px" class="photon-icon-pocket"></span>
<h2>pocket</h2>
</div>
<div>
<span title="power-button - 48px" class="photon-icon-power-button"></span>
<span title="power-button - 24px" class="photon-icon-power-button"></span>
<span title="power-button - 12px" class="photon-icon-power-button"></span>
<h2>power-button</h2>
</div>
<div>
<span title="preferences - 48px" class="photon-icon-preferences"></span>
<span title="preferences - 24px" class="photon-icon-preferences"></span>
<span title="preferences - 12px" class="photon-icon-preferences"></span>
<h2>preferences</h2>
</div>
<div>
<span title="print - 48px" class="photon-icon-print"></span>
<span title="print - 24px" class="photon-icon-print"></span>
<span title="print - 12px" class="photon-icon-print"></span>
<h2>print</h2>
</div>
<div>
<span title="privatebrowsing - 48px" class="photon-icon-privatebrowsing"></span>
<span title="privatebrowsing - 24px" class="photon-icon-privatebrowsing"></span>
<span title="privatebrowsing - 12px" class="photon-icon-privatebrowsing"></span>
<h2>privatebrowsing</h2>
</div>
<div>
<span title="readermode - 48px" class="photon-icon-readermode"></span>
<span title="readermode - 24px" class="photon-icon-readermode"></span>
<span title="readermode - 12px" class="photon-icon-readermode"></span>
<h2>readermode</h2>
</div>
<div>
<span title="refresh - 48px" class="photon-icon-refresh"></span>
<span title="refresh - 24px" class="photon-icon-refresh"></span>
<span title="refresh - 12px" class="photon-icon-refresh"></span>
<h2>refresh</h2>
</div>
<div>
<span title="return-arrow - 48px" class="photon-icon-return-arrow"></span>
<span title="return-arrow - 24px" class="photon-icon-return-arrow"></span>
<span title="return-arrow - 12px" class="photon-icon-return-arrow"></span>
<h2>return-arrow</h2>
</div>
<div>
<span title="rss - 48px" class="photon-icon-rss"></span>
<span title="rss - 24px" class="photon-icon-rss"></span>
<span title="rss - 12px" class="photon-icon-rss"></span>
<h2>rss</h2>
</div>
<div>
<span title="save - 48px" class="photon-icon-save"></span>
<span title="save - 24px" class="photon-icon-save"></span>
<span title="save - 12px" class="photon-icon-save"></span>
<h2>save</h2>
</div>
<div>
<span title="screenshot - 48px" class="photon-icon-screenshot"></span>
<span title="screenshot - 24px" class="photon-icon-screenshot"></span>
<span title="screenshot - 12px" class="photon-icon-screenshot"></span>
<h2>screenshot</h2>
</div>
<div>
<span title="search - 48px" class="photon-icon-search"></span>
<span title="search - 24px" class="photon-icon-search"></span>
<span title="search - 12px" class="photon-icon-search"></span>
<h2>search</h2>
</div>
<div>
<span title="share-macos - 48px" class="photon-icon-share-macos"></span>
<span title="share-macos - 24px" class="photon-icon-share-macos"></span>
<span title="share-macos - 12px" class="photon-icon-share-macos"></span>
<h2>share-macos</h2>
</div>
<div>
<span title="share-windows - 48px" class="photon-icon-share-windows"></span>
<span title="share-windows - 24px" class="photon-icon-share-windows"></span>
<span title="share-windows - 12px" class="photon-icon-share-windows"></span>
<h2>share-windows</h2>
</div>
<div>
<span title="shield-disabled - 48px" class="photon-icon-shield-disabled"></span>
<span title="shield-disabled - 24px" class="photon-icon-shield-disabled"></span>
<span title="shield-disabled - 12px" class="photon-icon-shield-disabled"></span>
<h2>shield-disabled</h2>
</div>
<div>
<span title="shield - 48px" class="photon-icon-shield"></span>
<span title="shield - 24px" class="photon-icon-shield"></span>
<span title="shield - 12px" class="photon-icon-shield"></span>
<h2>shield</h2>
</div>
<div>
<span title="sidebar - 48px" class="photon-icon-sidebar"></span>
<span title="sidebar - 24px" class="photon-icon-sidebar"></span>
<span title="sidebar - 12px" class="photon-icon-sidebar"></span>
<h2>sidebar</h2>
</div>
<div>
<span title="star-filled - 48px" class="photon-icon-star-filled"></span>
<span title="star-filled - 24px" class="photon-icon-star-filled"></span>
<span title="star-filled - 12px" class="photon-icon-star-filled"></span>
<h2>star-filled</h2>
</div>
<div>
<span title="star-menu - 48px" class="photon-icon-star-menu"></span>
<span title="star-menu - 24px" class="photon-icon-star-menu"></span>
<span title="star-menu - 12px" class="photon-icon-star-menu"></span>
<h2>star-menu</h2>
</div>
<div>
<span title="star-outline - 48px" class="photon-icon-star-outline"></span>
<span title="star-outline - 24px" class="photon-icon-star-outline"></span>
<span title="star-outline - 12px" class="photon-icon-star-outline"></span>
<h2>star-outline</h2>
</div>
<div>
<span title="star-remove - 48px" class="photon-icon-star-remove"></span>
<span title="star-remove - 24px" class="photon-icon-star-remove"></span>
<span title="star-remove - 12px" class="photon-icon-star-remove"></span>
<h2>star-remove</h2>
</div>
<div>
<span title="stars - 48px" class="photon-icon-stars"></span>
<span title="stars - 24px" class="photon-icon-stars"></span>
<span title="stars - 12px" class="photon-icon-stars"></span>
<h2>stars</h2>
</div>
<div>
<span title="store-disabled - 48px" class="photon-icon-store-disabled"></span>
<span title="store-disabled - 24px" class="photon-icon-store-disabled"></span>
<span title="store-disabled - 12px" class="photon-icon-store-disabled"></span>
<h2>store-disabled</h2>
</div>
<div>
<span title="sync - 48px" class="photon-icon-sync"></span>
<span title="sync - 24px" class="photon-icon-sync"></span>
<span title="sync - 12px" class="photon-icon-sync"></span>
<h2>sync</h2>
</div>
<div>
<span title="tab-new - 48px" class="photon-icon-tab-new"></span>
<span title="tab-new - 24px" class="photon-icon-tab-new"></span>
<span title="tab-new - 12px" class="photon-icon-tab-new"></span>
<h2>tab-new</h2>
</div>
<div>
<span title="tab - 48px" class="photon-icon-tab"></span>
<span title="tab - 24px" class="photon-icon-tab"></span>
<span title="tab - 12px" class="photon-icon-tab"></span>
<h2>tab</h2>
</div>
<div>
<span title="video-recorder-disabled - 48px" class="photon-icon-video-recorder-disabled"></span>
<span title="video-recorder-disabled - 24px" class="photon-icon-video-recorder-disabled"></span>
<span title="video-recorder-disabled - 12px" class="photon-icon-video-recorder-disabled"></span>
<h2>video-recorder-disabled</h2>
</div>
<div>
<span title="video-recorder - 48px" class="photon-icon-video-recorder"></span>
<span title="video-recorder - 24px" class="photon-icon-video-recorder"></span>
<span title="video-recorder - 12px" class="photon-icon-video-recorder"></span>
<h2>video-recorder</h2>
</div>
<div>
<span title="warning - 48px" class="photon-icon-warning"></span>
<span title="warning - 24px" class="photon-icon-warning"></span>
<span title="warning - 12px" class="photon-icon-warning"></span>
<h2>warning</h2>
</div>
<div>
<span title="window-new - 48px" class="photon-icon-window-new"></span>
<span title="window-new - 24px" class="photon-icon-window-new"></span>
<span title="window-new - 12px" class="photon-icon-window-new"></span>
<h2>window-new</h2>
</div>
<div>
<span title="window - 48px" class="photon-icon-window"></span>
<span title="window - 24px" class="photon-icon-window"></span>
<span title="window - 12px" class="photon-icon-window"></span>
<h2>window</h2>
</div>
<div>
<span title="wrench - 48px" class="photon-icon-wrench"></span>
<span title="wrench - 24px" class="photon-icon-wrench"></span>
<span title="wrench - 12px" class="photon-icon-wrench"></span>
<h2>wrench</h2>
</div>
</body>
</html>