Melhores sites para baixar imagens gratuitas e outros recursos

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
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.
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.
Glaze | 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.
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.
illlustrations - open source illustrations kit
Large set of opensource illustrations. You can use completely free and without attribution.
Open Doodles - Free sketchy illustrations
A library of sketchy illustrations of people free for personal and commercial use.
IRA Design by Creative Tim
Open-source illustrations that fits perfectly for any project you desire.
Humaaans: Mix-&-Match illustration library
Mix-&-match illustrations of people with a design library for InVIsion Studio and Sketch.
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...
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.
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

🖼️ 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.
Free Figma Resources for UI designers - 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.
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.
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.
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
Free Figma Resources for UI designers - 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.
Pinterest
Discover recipes, home ideas, style inspiration and other ideas to try.
Wunderstock
Illustration on Behance
View illustration work in its many forms — including everything from sketchbooks to murals to character design and more
Wunderstock

😺 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.
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.
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.
davisonio/awesome-gif
A curated list of awesome GIF resources. Contribute to davisonio/awesome-gif development by creating an account on GitHub.
  • 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!
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.
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!

🎉 Í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.
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.
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.
notlmn/awesome-icons
A curated list of awesome downloadable SVG/PNG/Font icon projects - notlmn/awesome-icons
React Icons
Include popular icons in your React projects easly with react-icons.
Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT licensed icon pack.
Flaticon, the largest database of free vector icons
Download all icons in SVG, PSD, PNG, EPS format or as webfonts

👌  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.
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 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

👍 SVG

Simple Icons
1381 Free SVG icons for popular brands.
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.
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.
gitmoji
An emoji guide for your commit messages.
😋 Get Emoji — All Emojis to ✂️ Copy and 📋 Paste 👌
Copy and paste every emoji with 👍 no apps required. 😊🥺😉😍😘😚😜😂😝😳😁😣😢😭😰🥰
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

🔤 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
DaFont - Baixar fontes
Arquivos de fonte dispon�veis gratuitamente. Procurar por ordem alfab�tica, por estilo, por autor ou por popularidade.
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.
Free Fonts! Legit Free & Quality | Font Squirrel
Handpicked free fonts for graphic designers with commercial-use licenses.

⚙️ 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.

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
Color Palette for Material Design
Material UI Colors
Colordot - A color picker for humans
Simple color picker everyone
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
uiGradients - Beautiful colored gradients
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.
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.

⌨️ 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.
Prettier
HTML Beautifier & Formatter
HTML viewer, formatter and beautifier to make it easier to read by creating proper indentation. Also validates your HTML code.

🤖 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!
PNG Compression and Online Image Compressor | PunyPNG
PNG compression and image optimization tool
Web Resizer - Making Photos Faster - 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
neutraltone/awesome-stock-resources
:city_sunrise: A collection of links for free stock photography, video and Illustration websites - neutraltone/awesome-stock-resources
lvwzhen/tools
Tools Online. Contribute to lvwzhen/tools development by creating an account on GitHub.
Carbon
Carbon is the easiest way to create and share beautiful images of your source code.
Screenshot.Rocks | 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!