ICONYZ
Français

Flex color icons

streamline-flex-color · 1 000 icônes · par Streamline · CC-BY-4.0 · multicolore · grille de 28 px · Mis à jour le

Flex color icons est une collection d'icônes gratuite et open source de 1 000 icônes SVG par Streamline, publiée sous la licence CC BY 4.0. Les icônes sont multicolores : elles conservent leurs couleurs à toutes les tailles. Elles sont dessinées sur une grille de 28 px et se redimensionnent sans perte en SVG.

Spécifications de design de Flex color icons

  • contour et plein
  • multicolore
  • arrondi

Les règles de dessin de cette collection, mesurées à partir de ses fichiers SVG. Servez-vous-en pour dessiner de nouvelles icônes assorties.

Canevas14 × 14
viewBox0 0 14 14
Zone de dessin13.5 × 13.5, marge de 0.25
Style de dessinMélange de contour et de remplissage
Épaisseur du trait1
Extrémités des traitsArrondi
Jointures des traitsArrondi
Rayon des coins0.75
CouleursEnviron 2 couleurs par icône
CoordonnéesJusqu'à 3 décimales
Lignes droites58 % horizontales ou verticales, 10 % à 45°
Courbes78 % des commandes de dessin
Symétrie37 % des icônes sont symétriques gauche-droite
Éléments par icône3.3
Commandes de dessin par icône36

Mesuré sur 63 icônes de cette collection.

Génération d'icônes par IA

La licence autorise de nouvelles icônes dérivées de cette collection.

  • Créditez les auteurs d'origine.

Mention de crédit : Based on Flex color icons by Streamline, licensed under CC BY 4.0. https://creativecommons.org/licenses/by/4.0/

Guide de style pour un prompt de LLM (en anglais)

Collez-le dans un prompt avec quelques icônes de cette collection, puis nommez l'icône voulue.

You draw new icons for the "Flex color icons" icon set (Iconify prefix "streamline-flex-color") by Streamline.
Style: mixed outline and fill, multicolor, rounded.

Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">.
- Keep the drawing inside a 13.5x13.5 live area: about 0.25 units of padding on every side (never less than 0).
- A typical icon's bounding box covers 91% of the canvas.

Drawing
- Icons mix strokes and filled shapes (mixed 51%, fill 40%, stroke 10%).
- stroke-width="1".
- stroke-linecap="round", stroke-linejoin="round".
- Wrap the shapes in <g fill="none">, as 68% of the set does.
- Round corners with a radius of about 0.75.

Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 58% horizontal or vertical, 10% at 45 degrees.
- About 78% of drawing commands are curves or arcs.
- Keep it simple: about 3 elements and 36 drawing commands per icon.
- Elements used by the set: path, g.

Color
- Multicolor, about 2 colors per icon. Use this palette: #4147d5, #d7e0ff, #ffffff, #8fbffa, #2859c5.

Output
- Reply with one complete <svg> element and nothing else: no comments, <title>, ids or scripts.
- Match the examples: reuse their shapes for shared parts (arrow heads, people, documents, badges).
Page 1 sur 11
Icône 3d-coordinate-axis
3d-coordinate-axis
Icône 3d-coordinate-axis-flat
3d-coordinate-axis-flat
Icône 3d-rotate-1
3d-rotate-1
Icône 3d-rotate-1-flat
3d-rotate-1-flat
Icône 3d-rotate-y-axis
3d-rotate-y-axis
Icône 3d-rotate-y-axis-flat
3d-rotate-y-axis-flat
Icône add-to-playlist
add-to-playlist
Icône add-to-playlist-flat
add-to-playlist-flat
Icône ai-chip-robot
ai-chip-robot
Icône ai-chip-robot-flat
ai-chip-robot-flat
Icône ai-generate-portrait-image-spark
ai-generate-portrait-image-spark
Icône ai-generate-portrait-image-spark-flat
ai-generate-portrait-image-spark-flat
Icône ai-scanner-robot
ai-scanner-robot
Icône ai-scanner-robot-flat
ai-scanner-robot-flat
Icône airplane-disabled
airplane-disabled
Icône airplane-disabled-flat
airplane-disabled-flat
Icône airport-plane
airport-plane
Icône airport-plane-flat
airport-plane-flat
Icône airship
airship
Icône airship-flat
airship-flat
Icône alien
alien
Icône alien-flat
alien-flat
Icône align-back-1
align-back-1
Icône align-back-1-flat
align-back-1-flat
Icône align-selection
align-selection
Icône align-selection-flat
align-selection-flat
Icône align-text-top
align-text-top
Icône align-text-top-flat
align-text-top-flat
Icône align-top-1
align-top-1
Icône align-top-1-flat
align-top-1-flat
Icône allergens-fish
allergens-fish
Icône allergens-fish-flat
allergens-fish-flat
Icône anchor
anchor
Icône anchor-flat
anchor-flat
Icône apple
apple
Icône apple-flat
apple-flat
Icône application-add
application-add
Icône application-add-flat
application-add-flat
Icône archive-box
archive-box
Icône archive-box-flat
archive-box-flat
Icône arrow-cursor-2
arrow-cursor-2
Icône arrow-cursor-2-flat
arrow-cursor-2-flat
Icône arrow-cursor-click-2
arrow-cursor-click-2
Icône arrow-cursor-click-2-flat
arrow-cursor-click-2-flat
Icône arrow-cursor-move
arrow-cursor-move
Icône arrow-cursor-move-flat
arrow-cursor-move-flat
Icône arrow-expand
arrow-expand
Icône arrow-expand-flat
arrow-expand-flat
Icône arrow-move
arrow-move
Icône arrow-move-flat
arrow-move-flat
Icône arrow-roadmap
arrow-roadmap
Icône arrow-roadmap-flat
arrow-roadmap-flat
Icône artificial-intelligence-brain-chip
artificial-intelligence-brain-chip
Icône artificial-intelligence-brain-chip-flat
artificial-intelligence-brain-chip-flat
Icône artist-song
artist-song
Icône artist-song-flat
artist-song-flat
Icône auto-correction-check
auto-correction-check
Icône auto-correction-check-flat
auto-correction-check-flat
Icône bag
bag
Icône bag-flat
bag-flat
Icône bag-suitcase-4
bag-suitcase-4
Icône bag-suitcase-4-flat
bag-suitcase-4-flat
Icône baggage
baggage
Icône baggage-flat
baggage-flat
Icône ball
ball
Icône ball-flat
ball-flat
Icône balloon
balloon
Icône balloon-flat
balloon-flat
Icône battery-charging
battery-charging
Icône battery-charging-flat
battery-charging-flat
Icône battery-medium-1
battery-medium-1
Icône battery-medium-1-flat
battery-medium-1-flat
Icône bell
bell
Icône bell-flat
bell-flat
Icône bell-notification
bell-notification
Icône bell-notification-flat
bell-notification-flat
Icône bicycle-bike
bicycle-bike
Icône bicycle-bike-flat
bicycle-bike-flat
Icône bill-4
bill-4
Icône bill-4-flat
bill-4-flat
Icône binoculars
binoculars
Icône binoculars-flat
binoculars-flat
Icône blank-calendar
blank-calendar
Icône blank-calendar-flat
blank-calendar-flat
Icône block-2
block-2
Icône block-2-flat
block-2-flat
Icône blood-donate-drop
blood-donate-drop
Icône blood-donate-drop-flat
blood-donate-drop-flat
Icône bluetooth-disabled
bluetooth-disabled
Icône bluetooth-disabled-flat
bluetooth-disabled-flat
Icône bluetooth-searching
bluetooth-searching
Icône bluetooth-searching-flat
bluetooth-searching-flat
Icône book-reading
book-reading
Icône book-reading-flat
book-reading-flat
Icône bookmark
bookmark
Icône bookmark-flat
bookmark-flat

À propos de Flex color icons

La collection est organisée en 16 catégories, dont interface essentielle (394), ordinateurs et appareils (98), argent et achats (94) et cartes et voyage (90).

Parmi les Flex color icons les plus populaires : fahrenheit, tablet capsule flat, shuffle, music equalizer, thermometer flat et merge vertical.

Ouvrez une icône pour la copier en SVG, JSX, Vue, Svelte, Solid, Astro ou CSS, ou téléchargez-la en SVG ou PNG. Les Flex color icons sont publiées sous la licence CC BY 4.0, qui autorise leur utilisation dans des projets personnels et commerciaux à condition de créditer l'auteur.

Flex color icons par catégorie

Utiliser Flex color icons

Toutes les icônes de cette page fonctionnent avec n'importe quel framework. Les exemples utilisent streamline-flex-color:fahrenheit ; ouvrez une icône pour copier son code exact en SVG, JSX, Vue, Svelte, Solid, Astro ou CSS. Pour des conseils de taille, de couleur et d'accessibilité, lisez comment utiliser des icônes SVG.

React

import { Icon } from "@iconify/react";

<Icon icon="streamline-flex-color:fahrenheit" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="streamline-flex-color:fahrenheit" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="streamline-flex-color:fahrenheit" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[streamline-flex-color--fahrenheit]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/streamline-flex-color -->
<div class="i-streamline-flex-color:fahrenheit"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="streamline-flex-color:fahrenheit"></iconify-icon>

Image HTML

<img src="https://iconyz.com/api/public/svg/streamline-flex-color/fahrenheit.svg" alt="Icône Fahrenheit" width="24" height="24">

FAQ : Flex color icons

Les Flex color icons sont-elles gratuites pour un usage commercial ?

Oui. Les Flex color icons sont publiées sous la licence CC BY 4.0, qui autorise leur utilisation dans des projets personnels et commerciaux à condition de créditer l'auteur.

Combien d'icônes contient Flex color icons ?

Flex color icons contient 1 000 icônes réparties dans 16 catégories.

Quelle est la licence des Flex color icons ?

Les Flex color icons sont distribuées sous CC BY 4.0. Le texte complet de la licence est disponible sur https://creativecommons.org/licenses/by/4.0/.

Qui a créé les Flex color icons ?

Les Flex color icons sont créées par Streamline.

Comment utiliser Flex color icons dans React ?

Installez @iconify/react et affichez <Icon icon="streamline-flex-color:fahrenheit" />, ou ouvrez une icône de cette page et copiez-la comme composant React autonome.

Quelle est la taille des Flex color icons ?

Les Flex color icons sont dessinées sur une grille de 28 px. En SVG, elles s'adaptent à toutes les tailles sans perte de qualité.

Collections similaires