Google Pixel and iPhone 7 Mockups
Last Updated on July 26, 2026 by Editorial Team
Minimalist devices mockup created by Juanfran de Gregorio. Includes Google Pixel and iPhone 7.
What makes this Google Pixel and iPhone 7 mockup set so useful is exactly what you see in the preview: no photorealistic shading, no drop shadows, no faux glass reflections trying to convince you it’s a real photograph.
Instead you get two clean line-art phone outlines, rendered in a single flat teal palette with just enough tonal variation to separate the body of the phone from the screen area.
That restraint is the whole appeal. Because the devices are drawn as simple outlines with a soft mint screen fill, they read as diagrams rather than props, which means they slot into a layout without fighting for attention against whatever UI or content you drop inside them.
The Google Pixel outline on the left and the iPhone 7 outline on the right are drawn with just enough distinguishing detail to be recognizable at a glance.
You can spot the Pixel’s single rear-facing camera dot and top speaker slit, and the iPhone 7’s classic home button circle and side volume rocker.
Beyond those cues, both shapes are pared down to a rounded rectangle body and a screen window, which is exactly what you want in a mockup meant to showcase content rather than the device itself.
Where This Style of Phone Mockup Works Best
This kind of vector phone mockup earns its keep in early-stage app design work.
Wireframes, UX flow diagrams, and pitch decks all benefit from a device frame that doesn’t distract from the screens you’re presenting.
Because the outline style is so neutral, it also works well in:
- Product roadmap slides where you need to show a feature on both Android and iOS without implying either platform is more polished than the other
- Blog posts and case studies breaking down a mobile app’s screens step by step
- Style guides or design system documentation where the phone is a container, not the hero
- Social graphics and Instagram carousels announcing an app launch, where a bold flat color background (like the teal here) reads well at thumbnail size
If you need a mockup that looks like a real product photo, with lighting, reflections, and a hand holding the device, this isn’t that.
But for anything where the goal is to communicate a screen design quickly and cleanly, the flat outline approach is often the smarter choice, since it never competes visually with the UI you’re placing inside it.
Editing this kind of mockup is straightforward in any vector editor. Since the phone body and the screen area are separate shapes, you can select the screen fill and either delete it or drop your own app screenshot on top, using the screen outline as a guide for scaling and cropping.
Because the phone outlines are built from simple strokes, recoloring them to match a different brand palette is just a matter of changing the stroke color, and the same goes for the background, which is currently a saturated teal but could easily become white, black, or a brand accent color without losing any of the mockup’s character.
If you’re placing both the Pixel and iPhone side by side as shown, keep your screen content consistent in scale and framing across both devices so the comparison reads cleanly, especially if the goal is to show cross-platform parity.
Pairing-wise, this style of mockup sits comfortably alongside flat icon sets, minimal UI kits, and sans-serif typography in presentation decks, since none of those elements try to simulate real-world texture either.
It also holds up well when scaled down for thumbnails or portfolio grid previews, since the thick outlines and simple color blocking stay legible even at small sizes, which isn’t always true of more detailed, photorealistic device mockups.
