Over the past couple of years, I've been collecting vector icons of retro items for my projects. First for myself, then for clients. And I noticed one thing: good, sensible sets with movie cameras, old photo cameras, and sewing machines are rare. Most are either primitive silhouettes or overloaded illustrations that turn into mush at small sizes.
An icon must be recognizable at 24×24 pixels. If you can't tell it's a movie camera at that scale — you've just drawn a rectangle with a pipe.
So I decided to write this article. No marketing fluff, no "huge number of high-quality images". Just practical advice: which items are truly recognizable, where to get good vectors, how to draw an icon yourself that you won't be ashamed to put in an interface or on a business card.
Why retro icons never go out of style
There are three reasons. First — emotional response. A 16mm movie camera or a Singer sewing machine evoke warm feelings even in those who have never used them. Second — uniqueness. Against the background of endless flat "hamburgers" and "houses", a vintage lens immediately grabs attention. Third — versatility. The same object can be presented in ten styles: from engraving to neomorphism.
Three main heroes: what designers choose
Movie camera (cine camera)
Recognizable details: two round drums (reels) on top, a rectangular body, one large lens. Often a carrying handle is added. In an icon, it's enough to keep the silhouette of "two circles on a rectangle" — the brain will fill in the rest. Bad examples: when the reels blend into the body or the lens is too small.
Photo camera
The most frequent character. A classic rangefinder Leica or a Zenit SLR have a characteristic "stump" (viewfinder) and a protruding lens. In profile, the body looks like an elongated rectangle with two or three roundings. Beginners' mistake: drawing many lenses inside the lens. At small sizes it's just a black spot. Better one large shiny dot or complete black fill.
Sewing machine
The most difficult for an icon. Main features: a characteristic curved body, a handwheel on the right (or a handle), a platform with a needle plate. In a simplified version, it's enough to show a "humped" silhouette and a wheel. Textile brands and ateliers love such icons, but often order overly detailed versions that then don't work in the site footer.
Table 1: Style comparison for retro icons (using a photo camera)
| Style | Recognizability at 24px | Best application | Drawbacks |
|---|---|---|---|
| Line (outline) 1–2px | High | Web interfaces, mobile apps | Gets lost on busy backgrounds |
| Flat solid | Very high | Buttons, card icons | Less "retro spirit" |
| Grunge / distressed | Medium (spots merge) | Landing pages "vintage style", beer labels | Textures distort when scaled |
| Neumorphic (soft shadows) | Low | Almost unsuitable for retro | Objects look plastic |
Where to get quality vectors: my personal checklist
I've tried almost all stock sites. Here's where you can actually find decent icons of movie cameras, photo cameras, and sewing machines without blurry lines and crooked paths.
- The Noun Project — a good database, many free with attribution. Search for "movie camera", "vintage photo", "sewing machine". Filter by solid or outline.
- Freepik — a lot, but quality varies. Download only those with clear lines in the preview, no extra nodes. Always check the vector in an editor, often the paths are jagged.
- Vecteezy — a decent collection of retro vectors. Downside: slow site.
- photolessons.org (our own selections) — we publish only what we've personally selected and tested. Each article contains links to verified sources and direct downloads.
How to draw your own icon if stock disappoints
I draw in Adobe Illustrator, but free Inkscape will work too. The algorithm is proven on beginners from my design group.
- Find two or three real photos of the object from different angles. Best — profile and slightly from above. Study the proportions. For example, on a sewing machine, the distance from the wheel to the needle plate is roughly equal to the body height.
- Make a sketch in vector using only rectangles and circles. Don't use curves until you've built the large masses. Save the Pen tool for later.
- Unite the shapes (Pathfinder → Unite) and add rounding. Retro objects rarely have sharp corners. Rounding radius by eye: 10–15% of the part's width.
- Draw the main details. For a movie camera — reels and lens. For a photo camera — viewfinder and shutter button. For a sewing machine — wheel and needle plate. Everything else is unnecessary.
- Test at 24×24. If not readable — remove secondary elements. If poorly readable — increase contrast (e.g., make the lens black, body gray).
<!-- Minimal working SVG code of a photo camera icon -->
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="8" width="24" height="16" rx="3" stroke="currentColor" stroke-width="2"/>
<circle cx="22" cy="16" r="3" fill="currentColor"/>
<rect x="7" y="5" width="6" height="3" fill="currentColor"/>
</svg>Table 2: Common mistakes in retro icons and how to fix them
| Mistake | Example (what's bad) | How to fix |
|---|---|---|
| Too many lines inside the outline | Lens with three highlights, aperture blades, threads | Leave one thick arc or just a fill |
| Thin protruding parts | Sewing machine wheel with spokes, sharp viewfinder | Make spokes a solid filled circle, viewfinder a rounded rectangle |
| Wrong proportions | Lens larger than camera body | Compare to real photo: lens occupies 30–40% of body height, not more |
| Too dark or light color scheme | Gray on gray, white on beige | Use black/white or two contrasting colors (e.g., dark burgundy and cream) |
Practice: how to embed icons on a site without headaches
Suppose you've found or drawn a set. Now the technical part.
- The best way is an SVG sprite. Put all icons in one sprite file, use
<use>. High loading speed, easy color changes. - If you're lazy with sprites — insert each icon via
<img src="icon.svg">. But then you can't change the color via CSS (unless the icon is monochrome and has fill="currentColor" inside). - For a print layout — save as EPS or PDF, and immediately in CMYK. Many beginner designers submit RGB files to print shops — result: dirty colors, unsaturated black.
Frequently Asked Questions
Can I use movie camera icons for my video blog logo?
Yes, if you have commercial rights (check the stock license). But for a logo, it's better not to take a ready-made icon "as is" — modify a unique detail (handle, flash, frame) to avoid accusations of copying.
Why does an icon downloaded from Freepik look fine but when opened in Illustrator it has tons of extra points?
Authors often use auto-tracing of raster images. The result is thousands of nodes on a simple outline. Solution: redraw the icon manually (it's 10 minutes for a simple silhouette) or find another source.
Is there a ready-made set where movie camera, photo camera, and sewing machine are in the same style?
Yes, for example, "Vintage Essentials" by IconBros on Iconscout. But it's paid (~$19). Free sets are often scattered, you have to combine them. I sometimes compile such collections myself — subscribe to photolessons.org updates, I post periodically.
How to animate a movie camera icon so the reels spin?
In SVG via CSS animation: assign each reel a <g> and add @keyframes spin { 100% { transform: rotate(360deg); } }. Then apply to each reel animation: spin 2s linear infinite;. But don't animate permanently — users will get tired quickly. Better on hover.
What is a Creative Commons BY license, and can I use it on a commercial business card?
Yes, but you must credit the author in the business card's fine print (or on the site). If you don't want to credit — look for CC0 (public domain) or buy an extended license.
Why does my photo camera SVG look blurry on iOS but sharp on my computer?
iOS Safari mishandles pixel-based width/height without fractional parts. Add shape-rendering="crispEdges" inside the SVG or set sizes in rem. Also check if there's a transform: scale() on the parent — it smooths the vector.
How to quickly turn a flat icon into a retro "old paper" effect?
In Adobe Illustrator: overlay a texture (e.g., noise or scanned watercolor paper texture) in Multiply blending mode over the icon. For web — you can use CSS filter: url(#noise) with an SVG filter, but it's heavy on performance. Better to keep the icon clean and add "oldness" to the background.
On which real projects have you personally used such icons?
I made a website for a 1920s-style bar — used neon outline icons of a movie camera and photo camera as links to a historical photo gallery. For a wedding photographer's portfolio — retro camera icons in the footer. And recently a logo for a sewing machine repair atelier — the sewing machine icon became the core of the identity.
Instead of a conclusion: three things to remember
First: retro icons work only when the silhouette remains unmistakably recognizable at small sizes. Test at 24 pixels. Second: don't chase uniqueness at the expense of clarity — better a simpler but clearer icon. Third: don't steal other people's vectors from search results. Authors spent time, and you lose reputation. Use legal stock or draw yourself, it's not hard.
If you have any questions about specific sets or techniques — write in the comments. I'll try to answer everyone. And if you've made a great retro icon set yourself — share it, maybe we'll package it as a free bundle for all photolessons.org readers.
DownloadTap to react
