Freepik : ressources graphiques et assets de design

Qu'est-ce que Freepik ?

Freepik est une des plus grandes plateformes de ressources graphiques au monde, fondée en 2010 en Espagne. Elle propose plus de 50 millions d'assets : vecteurs SVG, images, photos, icônes, templates PSD, mockups et illustrations générées par IA.

Pourquoi utiliser Freepik pour le développement web ?

• 🎨 Ressources SVG — parfaites pour les interfaces Angular, scalables sans perte
• 📦 Templates prêts à l'emploi — landing pages, dashboards, composants UI
• 🖼️ Photos et illustrations — pour enrichir le contenu sans budget photographie
• ⚡ Format WebP/SVG disponible — optimisé pour les performances web
• 🤖 IA générative (Pikaso) — créer des visuels sur mesure en quelques secondes

Types de ressources disponibles

Licences et conditions d'utilisation

La compréhension des licences Freepik est essentielle avant toute utilisation commerciale. Une erreur peut engager votre responsabilité légale.

Format d'attribution correct (plan gratuit)

<!-- Attribution HTML minimale requise par Freepik -->
<a href="https://www.freepik.com" title="Freepik">
    Image de Freepik
</a>

<!-- Attribution spécifique à l'auteur (recommandée) -->
<a href="https://www.freepik.com/author/stories" title="Stories">
    Illustration par Stories sur Freepik
</a>

Rechercher et filtrer efficacement

Astuces de recherche avancée

• Recherche en anglais — la base de données est majoritairement indexée en anglais, les résultats sont bien meilleurs qu'en français.
• Filtres de format — sélectionnez SVG pour l'intégration web, EPS pour l'impression, PNG transparent pour les overlays.
• Filtre "Free" — activez-le pour voir uniquement les ressources gratuites si vous êtes sur le plan gratuit.
• Style artistique — "flat", "outline", "gradient", "3D", "isometric" pour des cohérences visuelles.

Exemples de requêtes efficaces

// Pour un dashboard Angular :
"dashboard ui kit flat vector free"
"admin panel icons outline svg"

// Pour des illustrations 404/vide :
"empty state illustration flat svg"
"no data found vector"

// Pour des onboarding :
"onboarding app screens flat illustration"
"mobile app mockup psd free"

Intégrer les ressources dans un projet Angular

Utiliser un SVG Freepik comme composant Angular

// 1. Copier le SVG dans src/assets/icons/
// 2. Créer un composant Angular :

// src/app/shared/components/icon/icon.component.ts
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-icon',
  standalone: true,
  imports: [CommonModule],
  template: `
    <img
      [src]="'assets/icons/' + name + '.svg'"
      [alt]="alt"
      [width]="size"
      [height]="size"
      loading="lazy"
    />
  `
})
export class IconComponent {
  @Input() name = '';
  @Input() alt = '';
  @Input() size = 24;
}

Inline SVG avec HttpClient (pour colorisation CSS)

// Service pour injecter le SVG directement dans le DOM
import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { Observable, map } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SvgService {
  private http = inject(HttpClient);
  private sanitizer = inject(DomSanitizer);

  load(iconName: string): Observable<SafeHtml> {
    return this.http.get(`assets/icons/${iconName}.svg`, { responseType: 'text' }).pipe(
      map(svg => this.sanitizer.bypassSecurityTrustHtml(svg))
    );
  }
}

// Dans le template :
// <div [innerHTML]="svgContent$ | async"></div>
// Puis la couleur est contrôlée via CSS : fill: currentColor;

Optimiser les SVG avant intégration

# Installer SVGO (optimiseur SVG)
npm install -g svgo

# Optimiser un fichier individuel
svgo icon.svg -o icon.min.svg

# Optimiser un dossier entier
svgo --folder src/assets/icons/

# Résultat typique : -40% à -70% de taille de fichier

Freepik API (Pikaso)

Pikaso est l'outil d'IA générative de Freepik. Son API permet de générer des images à la demande dans vos applications — utile pour créer des visuels personnalisés, des avatars ou des illustrations de couverture.

Génération d'image via l'API REST

// Appel côté serveur (ne jamais exposer la clé API côté client)
POST https://api.freepik.com/v1/ai/text-to-image

Headers:
  x-freepik-api-key: VOTRE_CLE_API
  Content-Type: application/json

Body:
{
  "prompt": "Angular logo with modern flat design, blue gradient, transparent background",
  "num_inference_steps": 4,
  "guidance_scale": 0,
  "num_images": 1,
  "image": { "size": "square_1_1" },
  "styling": {
    "style": "photo",
    "color": "pastel"
  }
}

Réponse :
{
  "data": [
    { "base64": "iVBORw0KGgo..." }
  ]
}

Alternatives et comparatif

Bonnes pratiques et attribution

• Toujours vérifier la licence de chaque ressource individuellement — certains assets "premium" nécessitent un abonnement actif au moment de l'utilisation.
• Conserver une trace des téléchargements avec lien source, auteur et date — facilite la conformité en cas d'audit légal.
• Compresser avant de déployer — utilisez SVGO pour les SVG, Squoosh ou ImageOptim pour les PNG/JPG.
• Ne pas modifier trop légèrement pour contourner l'attribution — les CGU Freepik s'appliquent aux œuvres dérivées.
• Passer au plan Premium pour les projets commerciaux importants — évite les problèmes d'attribution et donne accès aux ressources exclusives.

Conclusion

Freepik est une ressource incontournable pour les développeurs web qui veulent enrichir leurs interfaces sans budget graphiste. Sa bibliothèque massive de SVG, illustrations et photos, couplée à l'IA générative Pikaso, en fait un outil polyvalent du prototypage à la mise en production.

• 🎨 50M+ assets — vecteurs, photos, icônes, templates PSD
• 📜 Plan gratuit utilisable — avec attribution obligatoire
• ⚡ SVG + SVGO — intégration performante dans Angular
• 🤖 API Pikaso — génération d'images IA pour les apps dynamiques
• 🔒 Traçabilité — conservez toujours la source et la licence de chaque ressource