Free iPhone X Vector
Last Updated on August 18, 2026 by Editorial Team
A front and back iPhone X mockup in Illustrator .AI format. Created and shared by Pankaj Nautiyal
What makes this iPhone X vector genuinely useful is the angle it chooses. Both handsets are tilted just enough to read as a product shot rather than a flat spec sheet, with the white glass-back model turned to show off the dual camera module and centered Apple logo, while the front-facing unit sits slightly forward and overlapping, screen lit up and ready for a design drop.
That layered, overlapping arrangement is the detail worth noticing. It is not two isolated icons side by side; it is a composed scene, which means you can lift either phone out on its own or keep them together depending on what the layout needs.
The color story is deliberately neutral. The device shells are rendered in a soft white with subtle gray shading to suggest the glass back and metal edges, sitting against a plain charcoal background that makes the phones pop without fighting for attention.
The one spot of real color is the lock screen itself, a vivid pink-to-blue gradient wallpaper with the classic 9:41 time stamp, Tuesday date line, and the flashlight and camera shortcuts along the bottom edge. That gradient screen is doing a lot of visual work here, giving the whole graphic some warmth and life against an otherwise monochrome device.
Where This iPhone X Mockup Works Best
Because the front screen is a distinct, editable shape, this is built for showing off app UI, mobile website designs, or social content directly on the display.
Swap the gradient wallpaper for a screenshot of your app’s home screen, a messaging interface, or a portfolio site rendered in mobile view, and you have an instant presentation piece for a case study or client deck.
The back view earns its keep too. Anyone designing phone skins, wallpaper packs, or device accessories can use it to mock up how a pattern or branding element would sit on the actual hardware, camera bump and all.
It also reads well as a simple hero graphic for a tech blog post, an app landing page, or a slide where you just need “a modern smartphone” without any screen content at all.
Editing it follows the usual vector workflow. Select the screen area, mask or paste your artwork into that shape, and scale it to fill the display evenly so it doesn’t spill past the rounded corners or the notch.
The body of the phone is built from simple shaded shapes, so recoloring the shell to black, gold, or a brand color is a matter of adjusting the fill on those layers rather than repainting anything from scratch.
If you’re placing this into a busier composition, try adding a soft drop shadow beneath the phones to ground them, since the flat charcoal backdrop currently gives them no cast shadow of their own.
For layout pairing, this mockup sits comfortably next to clean sans-serif type and plenty of negative space, echoing the same minimal, product-focused mood as the graphic itself.
It also works well stacked with other device mockups, laptop or tablet frames in a similar flat, neutral style, if you’re building a multi-device showcase for a responsive design or a UI kit presentation.
