Melhores sites para baixar imagens gratuitas e outros recursos

16 de Jul de 2020

Listamos vários sites onde você pode baixar imagens gratuitas! E também animações, gifs, svgs, emojis, fontes que podem ser utilizadas no seu projeto — Design, Frontend, post no Blog, apresentação Power Point para palestras, Meetups, Pitch e muito mais!

Esse post é para deixar nos seus favoritos ⭐

🚀 Awesome Rocketseat Resources

Versão sem preview.

👨‍💻 Ilustrações e Vetores

Lista caprichada de vetores e ilustrações que deixam qualquer site moderno e bonito:

Freepik | Graphic Resources for everyone
Discover millions of copyright-free vectors, photos and PSD
FreepikFreepik 2 weeks ago
Free Illustrations 2020 [Free SVG Illustrations] MIT Vectors
Free Illustrations and Icons for everyone. Use them for anything you like. Free for commercial and personal use.
lukaszadam
All Collections on Blush
Blush makes it easy to add illustrations to your projects. With collections made by artists across the globe, there’s something for everyone—and every project.
Illustrations | unDraw
The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.
unDraw
Glaze | Illustrations
Illustrations
Download free illustrations background images for your awesome landing pages.
Collection of high-resolution vector or illustrations background images for modern websites and landing pages. Updated every week with new illustrations with different topics. You can contact us to suggest new topics for illustration background images as per your need.
Freellustrations
DrawKit - Beautiful free vector illustrations
Free vector SVG illustrations for you to use on your next project, no attribution required! Illustration packs, systems, icons and more.
Beautiful free vector illustrations
illlustrations - open source illustrations kit
Large set of opensource illustrations. You can use completely free and without attribution.
Free for Commercial and Personal Use
Open Doodles - Free sketchy illustrations
A library of sketchy illustrations of people free for personal and commercial use.
Open Doodles
IRA Design by Creative Tim
Open-source illustrations that fits perfectly for any project you desire.
IRA Design
Humaaans: Mix-&-Match illustration library
Mix-&-match illustrations of people with a design library for InVIsion Studio and Sketch.
InVision
Free High Quality Images from Wannapik.com
High quality images
Начало
Facebook Design — Designing for the global diversity of human needs
Our teams design and build Facebook apps and technologies—the Facebook app, Messenger, Instagram, WhatsApp, Oculus, Workplace, Portal and Novi—to bring peopl...
Facebook DesignFacebook, Inc.
Download Free Vector Art, Images, & Vector Graphics
Download thousands of user submitted free vectors for personal and commerical use from vector artists all over the world.
FreeVectors
Download free icons, music, stock photos, vectors
Designers, download the design stuff for free — icons, photos, UX illustrations, and music for your videos.
Create awesome design with Smash illustrations
Changing and overlapping them, you can quickly illustrate an idea of your startup
neutraltone/awesome-stock-resources
:city_sunrise: A collection of links for free stock photography, video and Illustration websites - neutraltone/awesome-stock-resources
GitHubneutraltone

🖼️ Figma

Figma é um software que usamos para prototipar as telas da aplicação web e mobile, trouxemos alguns links que irão ajudar a te inspirar:

Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
Figma
Free Figma Resources for UI designers - FreebiesUI
FreebiesUI
Figma Resources
Free Figma UI Kits, Wireframe Kits, Templates, Icons and More
Beautifully designed, ready to use Figma templates to save you time and accelerate your workflow.
Figma
Download 100 free Figma design for your next projects - uistore.design
Free handpicked UI Kits for your real life projects. Curated free design resources to energize your creative workflow.
uistore.design
Free and Premium Figma Resources
Figma component libraries, icon libraries, UI and GUI kits, templates, mobile responsive templates, wireframes, mockups and more. Professionally crafted Figma products for UX and visual designers.
Figma Resources & Templates - Freebie Supply
Free Figma resources and templates for the first interface design tool with real-time collaboration. Here we have icons, type guides and app concepts all designed with Figma.
Freebie Supply
Free and Premium Figma Resources
Figma component libraries, icon libraries, UI and GUI kits, templates, mobile responsive templates, wireframes, mockups and more. Professionally crafted Figma products for UX and visual designers.
Figma Design System UI kit - iOS, Material design, React, Dashboard templates
Components-driven team libraries and design kits for Figma. Quickstart your every project with our smart design systems. Concentrate on the hi-end prototyping without messing with pixels. Create websites, mobile or complex desktop apps faster with our Figma templates
Home of Setproduct
Free Figma Resources for UI designers - FreebiesUI
FreebiesUI

📸 Fotos

Se seu site ou sua apresentação precisa de uma imagem bonita, com certeza essa lista vai te atender super bem:

Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
UnsplashUnsplash
Pinterest
Discover recipes, home ideas, style inspiration and other ideas to try.
Pinterest
Wunderstock
Photoby Joe deSousa
Illustration on Behance
View illustration work in its many forms — including everything from sketchbooks to murals to character design and more
BehanceBehance
Wunderstock
Photoby Joe deSousa

😺 Animações e Gifs

Os Gifs ganharam o coração da galera e uma  aplicação com animações ficam bem divertida de utilizar, se for criar um app você precisa conferir o Lottie  que deixamos em primeiro da lista:

Lottie
Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
Lottie
GIPHY | Search All the GIFs & Make Your Own Animated GIF
GIPHY is your top source for the best & newest GIFs & Animated Stickers online. Find everything from funny GIFs, reaction GIFs, unique GIFs and more.
GIPHYGIPHY
Tenor GIF Keyboard - Bring Personality To Your Conversations
Say more with Tenor. Find the perfect Animated GIFs and videos to convey exactly what you mean in every conversation.
Tenor
davisonio/awesome-gif
A curated list of awesome GIF resources. Contribute to davisonio/awesome-gif development by creating an account on GitHub.
GitHubdavisonio
  • Lista de ferramentas para criar seus próprios gifs:
MakeAGif - Create Animated Gifs the Fun and Easy Way
Learn how to create and convert any file into an animated gif. All it takes is 3 easy steps! Then watch the magic happen!
MakeAGif
Animated GIF Maker - Make GIFs from Images or Videos
Create high quality animated gifs & videos of yourself or advertisement banners online with GIFMaker.me, easy to use, no sign up needed.
Make GIFs from Images or Videos
MakeAGif - Create Animated Gifs the Fun and Easy Way
Learn how to create and convert any file into an animated gif. All it takes is 3 easy steps! Then watch the magic happen!
MakeAGif

🎉 Ícones

Segue uma lista de ícones para projetos web e mobile (React Native), cada uma mais bonito que o outro:

Free, beautiful icon packs from DrawKit
Royalty free SVG icon packs, in multiple styles, available to download for free to use on personal and commercial projects
Animated Icons - 400 Free Icons
Add user delight to your site with this free pack of 300 animated icons in JSON (Lottie), GIF, and After Effects formats.
400 Free Icons
Eva Icons - beautifully crafted Open Source UI icons for common actions and items.
Eva Icons is a pack of 480 delightful icons available for free. Download Eva Icons to use them in your products for mobile and web apps. Available as SVG, PNG, Web Font and Sketch. Open Source, built by the Nebular team.
beautifully crafted Open Source UI icons for common actions and items.
Feather – Simply beautiful open source icons
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
Simple Icons
1381 Free SVG icons for popular brands.
Simple Icons
notlmn/awesome-icons
A curated list of awesome downloadable SVG/PNG/Font icon projects - notlmn/awesome-icons
GitHubnotlmn
React Icons
Include popular icons in your React projects easly with react-icons.
react-iconsMenuMenu
Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT licensed icon pack.
Ionicons5.1.2Ionic
Flaticon, the largest database of free vector icons
Download all icons in SVG, PSD, PNG, EPS format or as webfonts
FlaticonSee more

👌  Geradores de Favicon

Todo site ou app precisam de um favicon, tanto o ícone do aplicativo na tela Home ou também no título na aba do navegador. Essas ferramentas vão te ajudar, você pode pegar o logotipo do  projeto e gerar os ícones do app e o favicon:

Favicon Generator for perfect icons on all browsers
The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.
RealFaviconGenerator.net
Favicon & App Icon Generator
Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.
Favicon.ico & App Icon Generator
favicon.ico Generator
favicon.cc is a tool to create or download favicon.ico icons, that get displayed in the address bar of every browser.
X-Icon Editor
X-Icon Editor, create high resolution icons (favicon) from your own browser
Avarice S.r.l.

👍 SVG

Simple Icons
1381 Free SVG icons for popular brands.
Simple Icons
Blobmaker - Make organic SVG shapes for your next design
Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.
Make organic SVG shapes for your next design
Get Waves – Create SVG waves for your next design
A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!

😛 Emojis

Emojis servem para dar emoção no texto, muita gente gosta! Aqui na Rocketseat trabalhamos remoto e usamos bastante no chat do Discord e também nos posts como você já deve ter percebido. Confira a lista:

EmojiCopy | Simple emoji copy and paste by JoyPixels®
Our new mobile-friendly web app provides a simple beautiful emoji copy and paste interface WITH search and auto-copy technology.
EmojiCopy
gitmoji
An emoji guide for your commit messages.
An emoji guide for your commit messagesheartstartwittergitmojiCarlos Cuesta
😋 Get Emoji — All Emojis to ✂️ Copy and 📋 Paste 👌
Copy and paste every emoji with 👍 no apps required. 😊🥺😉😍😘😚😜😂😝😳😁😣😢😭😰🥰
😋 Emoji
Web Emoji - All emojis 😁 3342 pcs Copy and Paste keyboard
Copy and paste keyboard over 3,342 emojis to use on Facebook, Twitter, Instagram, Google, skype, Slack, Snapchat, GitHub, WhatsApp, iphone, samsung and more! Supported on iOS, Android, macOS, Windows, Linux and ChromeOS
WebEmoji

🔤 Fontes

Tipografia é muito importante, você pode baixar as fontes no seu computador e instalar facilmente. O primeiro link é bem mais que o suficiente para te atender,  deixamos mais três links com fontes bem legais para seus projetos.

Google Fonts
Making the web more beautiful, fast, and open through great typography
Google Fonts
DaFont - Baixar fontes
Arquivos de fonte dispon�veis gratuitamente. Procurar por ordem alfab�tica, por estilo, por autor ou por popularidade.
Baixar fontes
Everything Fonts - All you want to do with fonts... and more!
Everything Fonts is a place for font tools/font information/font download/font-face hosting and one of a kind font market place.
Everything Fontsorthosie.com
Free Fonts! Legit Free & Quality | Font Squirrel
Handpicked free fonts for graphic designers with commercial-use licenses.
100% Free For Commercial Use.Ethan Dunham

⚙️ Ferramentas

Com o Canva você pode criar várias artes gráficas para posts no Facebook, Instagram, Miniatura do seu canal no Youtube, capa para LinkedIn, Twitter, Facebook. Tem uma infinidade de templates pagos e gratuitos, além de imagens e outros recurso que você pode utilizar.

Remove.bg te ajuda a remover o fundo do background das imagens sem a necessidade de ser especialista em Photoshop. Adeus varinha mágica! É muito fácil, só fazer upload da imagem e baixar a imagem sem o fundo, e o site permite ainda você fazer alguma customizações e correções.

Remove Background from Image – remove.bg
Remove Image Background: 100% automatically – in 5 seconds – without a single click – for free.
remove.bgKaleido

Se você curte o photoshop, você vai curtir esse site que trás o photoshop no navegador e de graça. Bem útil para fazer uma edição rápida em alguma imagem.

Site bem legal para criar seus logotipos ou se inspirar:

Logodust
Free & Open Sourced Logo Designs

🎨 Paletas de Cores

Só o Diego Fernandes mesmo para decorar o código das cores no CSS. Temos aqui uma lista de sites onde podemos pegar o código RGB e colocar no frontend da nossa aplicação:

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨
280 handpicked colors ready for COPY & PASTE
14 Color Palettes, 280 colors 🎨
Color Palette for Material Design
Material UI Colors
materialuicolors
Colordot - A color picker for humans
Simple color picker everyone
Colordot by hailpixel
SpyColor.com - color conversion tools RGB, CMYK, HSV
Color schemes, gradients, hexagonal codes, CMYK, RGB, HSL, HSV, CIELAB, CIELUV, CIELCH, XXY, Hunter-Lab, YIQ conversion tool
color conversion tools RGB, CMYK, HSV
uiGradients - Beautiful colored gradients
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.
uiGradients
Paletton - The Color Scheme Designer
In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer. Use the color wheel to create great color palettes.
The Color Scheme Designer

⌨️ Formatar o código para postar no blog

Pegar o código no VSCODE e jogar no blog pode perder a indentação, você pode utilizar algumas das soluções abaixo:

Carbon
Carbon is the easiest way to create and share beautiful images of your source code.
Carbon
Prettier
Prettier
HTML Beautifier & Formatter
HTML viewer, formatter and beautifier to make it easier to read by creating proper indentation. Also validates your HTML code.
HTML Beautifier & Formatter

🤖 Compressão de imagens para melhorar performance do site

Se você produz conteúdo em um site ou se é um web developer tem que conhecer essas ferramentas abaixo para melhorar a performance no carregamento da página. Uma imagem com muitos bytes pode prejudicar. Alguns CMS já fazem a otimização para você, mas não custa nada checar, se a imagem estiver muito grande utilize esses sites que diminuem alguns bytes e preservam a qualidade da imagem. O SEO agradece!

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!
TinyPNG
PNG Compression and Online Image Compressor | PunyPNG
PNG compression and image optimization tool
Testimonial_ask~ Frederick Townes, CTO, Mashable
Web Resizer - Making Photos Faster - Optimize pictures for websites and email
Optimize pictures for websites and email

🔥 Outros

Trouxemos alguns sites que podem te inspirar nos seus projetos. Os repositórios no Github com o nome awesome-xxxx tem várias coisas legais, a comunidade contribui com vários links, o mais famoso é do Sindre Sorhus, primeiro da lista.

sindresorhus/awesome
😎 Awesome lists about all kinds of interesting topics - sindresorhus/awesome
GitHubsindresorhus
neutraltone/awesome-stock-resources
:city_sunrise: A collection of links for free stock photography, video and Illustration websites - neutraltone/awesome-stock-resources
GitHubneutraltone
lvwzhen/tools
Tools Online. Contribute to lvwzhen/tools development by creating an account on GitHub.
GitHublvwzhen
Carbon
Carbon is the easiest way to create and share beautiful images of your source code.
Carbon
Screenshot.Rocks | Create browser mockups from screenshots in seconds
Create browser mockups from screenshots in seconds
Create browser mockups from screenshots in seconds

🙏 Considerações finais

Confira se todos os recursos podem ser utilizados com ou sem os créditos ao autor de cada recurso. Alguns sites pedem para que citem o nome do criador da arte gráfica. ⚠️  Fiquem atentos!

Fica aqui o agradecimento ao João Inácio e Tiago Luchtenberg pela inspiração e sugestões ✌️ nessa pesquisa.

Você deve estar com a mente explodindo de tantas ideias e inspirações para seus projetos!

E ai o que achou da nossa lista? Comente aí embaixo, tem algum link bacana que poderia ser incluído? Compartilhe conosco ♥️

Espero que tenha curtido! 💜

O aprendizado é contínuo e sempre haverá um próximo nível!

Thiago Marinho

Dev Apaixonado por Tecnologia & Educação! Evolua rápido como a tecnologia, aprendizado é contínuo e sempre haverá um próximo nível. Boost Yourself! 🚀