Skip to content
Customizable and easy to use IOS, Android and OSX device frames in one line of HTML
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Customizable and easy to use IOS, Android and OSX device frames in one line of HTML!

How it looks



  • Easy to use, easy to customize
  • No icon font dependency, every icon is included as SVG
  • Multiple builtin box shadow
  • Working clock in the topbar
  • Lightweight: ~3KB minified and gzipped

How to use it

  • Download with npm or CDN:
npm install lx-devices
<script src=""></script>
  • Include it in your html:
<div class="lx-android" data-width="225px" data-height="400px" data-shadow="3"></div>
  • Where the classname should be lx-android, lx-ios or lx-osx based on your needs
  • Every data attribute is optional
  • The shadow attribute accepts numbers 1 to 5 and sets a material shadow according to this
  • If you only set the height or only the width the other value will be 16/9 or 3/2 proportion to that. (for Android/IOS and OSX relatively)
  • If you don't provide neither width nor height attribute itt will set to 225px width and 400px height for Android/IOS and 480px width 320px height for OSX
  • You can also use the data-title attribute for OSX to set the window's title
  • The font is set to Roboto and defaults to sans-serif, so if you include Roboto in your project it will set itself to it
  • If you want to target the topbar bottombar or the screen on the devices with your CSS you can do that with the lx-topbar, lx-bottombar and lx-screen respectively


  • If you have any question, suggestion or found a bug please open an issue
  • You can contact me at
You can’t perform that action at this time.