Icônes
Les icônes de ce design-system vous sont proposées en plusieurs lots distincts : les icônes du framework SipaUI, les icônes du groupe et les drapeaux.
Les icônes du framework
Il s’agit d’une police d’icônes (su-icons) regroupant tous les pictogrammes basiques utiles pour les composants du framework à la place des caractères (glyphes). Cette fonte est volontairement peu « équipée » afin de limiter son poids et permettre au framework de rester léger et performant.
Les icônes de cette fonte ont été crées pour un affichage optimal à une taille de 24px. Il est donc préconisé de privilégier cette taille en font-size.
Utilisation
Pour pouvoir utiliser ces pictos via la fonte, il faut donc appeler le framework SipaUI dans votre projet et mettre la classe sipaui sur un parent (idéalement, sur le <body>).
Ensuite, vous avez 2 possibilités :
- Appeler une icône dans votre HTML avec la balise
<i>et la classesu-icon. On écrit alors en contenu de la balise le texte de référence de l’icône souhaitée (par exemple « alerte » pour afficher l’icône d’alerte, il s’agit en fait de l’utilisation du principe de ligature lors de la création de la police).
<i class="su-icon">alerte</i>
- Appeler une icône dans votre CSS en utilisant
content+ la valeur de la glyphe (ie :\e90a) ou celle de la référence (ie :suivant) et la fontesu-icons.
<style>
.style::after {
content: "\e90a";
font-family: su-icons!important;
font-size: 24px;
display: inline-block;
transform: translateY(4px)
}
</style>
<a href="javascript:;" class="style">Lien sortant</a>
Catalogue
Classement par ordre alphabétique.
Téléchargement
Vous pouvez télécharger ces icônes au format fonte, SVG ou PNG :
Les icônes du groupe
Ces icônes sont des icônes de « décoration ». Elles sont nombreuses et couvrent de larges domaines.
Catalogue
Classement par ordre alphabétique.
https://media.ouest-france.fr/v1/fonts/245b6c21c861867644efe4e473a7bd44-ampoule.svghttps://media.ouest-france.fr/v1/pictures/96317f85ae42940b1db84a2d3ee958cc-ampoule.png?client_id=cmsfront&sign=3b33857ac911cac064b045911aee1c698e80bc5ea91bf509e736dab16fa838be
https://media.ouest-france.fr/v1/fonts/f9f4a4687fb76ab8660791156bfa555f-anniversaire.svghttps://media.ouest-france.fr/v1/pictures/7dce258f105300f2b67638fb88227359-anniversaire.png?client_id=cmsfront&sign=23499a76dcaa6d66036afe8e050a451f06647d9efa34807934d94df1f123590e
https://media.ouest-france.fr/v1/fonts/f44fd0585e560bebcf3b13883c347a70-bateau.svghttps://media.ouest-france.fr/v1/pictures/e443c8e06844b844983cc3e6e923eb2b-bateau.png?client_id=cmsfront&sign=1ab3e0fe4b5fbeab57483e6dc40137b8bbdb26f05a9051f4bf558a466ca893ca
https://media.ouest-france.fr/v1/fonts/25c8a964720243b0eaa48e79bd858931-bloque-selection.svghttps://media.ouest-france.fr/v1/pictures/dcb8e7a4bfdc0c4d3ecb77adc193ce29-bloque-selection.png?client_id=cmsfront&sign=bd57cb2cc7f474adde640b7a4640947e1cc2f74ef4c226b3da9b5f37463ef08d
https://media.ouest-france.fr/v1/fonts/5ef19c8b411c427864dabec9c65675d8-budget.svghttps://media.ouest-france.fr/v1/pictures/7564cc4769eae9cf9df558615873e8ba-budget.png?client_id=cmsfront&sign=639ebbd9f880e24acea8c799ec44453d6cc0754f9405c7eb5bfdb0626f7c05d9
https://media.ouest-france.fr/v1/fonts/452e6926d2b703ae9afb24ef6d707fc0-chargement.svghttps://media.ouest-france.fr/v1/pictures/c8a2dfdfd86010c561329c5d2704346a-chargement.png?client_id=cmsfront&sign=b6feca5e7c4ff732f4b04a1180200eeb8e66167ad92a770b4b3c48b5514aed0e
https://media.ouest-france.fr/v1/fonts/9457902ff35a49b0444076dd3d2e67b9-chercher-petit.svghttps://media.ouest-france.fr/v1/pictures/cfa9538b69e1f37d118346870bfc993f-chercher-petit.png?client_id=cmsfront&sign=814e10d41837fe149f733e9f7ecc4fdfdfd48bd1943288acaf83d4d869dc3481
https://media.ouest-france.fr/v1/fonts/9c3df6d1b7991df52b3392a32ea79d60-classement.svghttps://media.ouest-france.fr/v1/pictures/00d56532a2997d2f1ec832bc380beab7-classement.png?client_id=cmsfront&sign=dcbb25bfb9fe1c64df7a9c965062ab4f70da95d8bb195dae5eedd2ed94b2b641
https://media.ouest-france.fr/v1/fonts/ca915cabc21a1f7ae7f2837793a8a1a5-cocarde-le-marin.svghttps://media.ouest-france.fr/v1/pictures/f17a5cfeb90bb7cb925072524fd65fed-cocarde-le-marin.png?client_id=cmsfront&sign=f60b4f3acf5bd2c1e360732fca3b22d2fb2a761eaa0fa4c1a6e5b529e2efb72e
<img src=https://media.ouest-france.fr/v1/fonts/78df1e1d37672e418b064effa2fef57c-cocarde-ouest-france.svghttps://media.ouest-france.fr/v1/pictures/50728defa8f7b541f4b4290c451b97c3-cocarde-ouest-france.png?client_id=cmsfront&sign=f417195415e668241befae7e16a1603b164f69457902f02e069e3377e793b050
https://media.ouest-france.fr/v1/fonts/a248ef34ec96ebfa8d0bd8bd7246214b-comparateur.svghttps://media.ouest-france.fr/v1/pictures/4e46add365a4eaeb898e88c6646aa195-comparateur.png?client_id=cmsfront&sign=0da12403bc59e02deef1a8f8d17b4cc219a95d3e3aed59232aa64d16d9c7535f
https://media.ouest-france.fr/v1/fonts/6a3d5c9dd0a5538c611f1de80596ade1-date.svghttps://media.ouest-france.fr/v1/pictures/1ebf54b0c6b156ca4359cbf60e8ecf37-date.png?client_id=cmsfront&sign=fa57b15faef33d99683f659c6350ef44c64d483876929cb34dd95305e841b18c
https://media.ouest-france.fr/v1/fonts/a306d870f2855bca599fae9da61d4093-debloque-selection.svghttps://media.ouest-france.fr/v1/pictures/a22f714a177a74aae2ebfe2f9e390680-debloque-selection.png?client_id=cmsfront&sign=5a193f7a720400168b1b5db210f4e2ab340d8008f655a80e58a0871e3c4a66cb
https://media.ouest-france.fr/v1/fonts/d88a261435c13da716a632e9e120b62c-deconnecter.svghttps://media.ouest-france.fr/v1/pictures/52a5cb84e3db83db91e91c2b17d048ae-deconnecter.png?client_id=cmsfront&sign=6dde25536fa4392ba6d60ab768362fcfc40f3ad02e5082b3ae7a1bd94e774052
https://media.ouest-france.fr/v1/fonts/02d154fb8e6dbe7d49abcea0608d472b-elections.svghttps://media.ouest-france.fr/v1/pictures/e8bea611133bc2ece8aa2782ffb0bd14-elections.png?client_id=cmsfront&sign=27b26da4b542553f4e8af8c3a75e988647f533c5bc9a2173a9a12bad8d2c5c8e
https://media.ouest-france.fr/v1/fonts/a6d648ce58ce8c6a29ccdb412420de36-equipe.svghttps://media.ouest-france.fr/v1/pictures/d2956a4e692781431221f88a3d3821bc-equipe.png?client_id=cmsfront&sign=1bb43ff363d9aef7b1fbfab18c942b48e21df70a2411e3a1b2704c06fccc87b0
https://media.ouest-france.fr/v1/fonts/82a13b6c7a7d8764c0bd16de690cd821-etapes.svghttps://media.ouest-france.fr/v1/pictures/000f73df2e5c0825a0f40410ce830581-etapes.png?client_id=cmsfront&sign=cb5b059d6b2f73840a1f3dcbd7a4f66c0d85496250d2455a49b1da378262ee18
https://media.ouest-france.fr/v1/fonts/e6c2048953a6da9613fad06c572265bc-etc.svghttps://media.ouest-france.fr/v1/pictures/e2a2d5811304df2e6eac9057bd8b38cf-etc.png?client_id=cmsfront&sign=0e7906254093f7c880deeadce945a9e9edc62fadedf9500c38a2395dc9c9af7b
https://media.ouest-france.fr/v1/fonts/76c1cd7da05707fcee90b5a47b866163-etoile.svghttps://media.ouest-france.fr/v1/pictures/569e8d9e80bd56402c6ae8cf959a6e74-etoile.png?client_id=cmsfront&sign=4db39e62670c6628d533aae7b6c3cc5ddb15fd41934422f3c3f889df837bcbf2
https://media.ouest-france.fr/v1/fonts/b105daa6670337e10724ec56b8ca0fc6-euro.svghttps://media.ouest-france.fr/v1/pictures/bb23ae97be40ea207e25169131ab9bfd-euro.png?client_id=cmsfront&sign=f37cf17fb28a3944e9fc3817fe7bedb5891838930b66436d67652b8f2631d2a0
https://media.ouest-france.fr/v1/fonts/d7392dddee9d20dd6a0d4f4564d8c7b6-feux-artifice.svghttps://media.ouest-france.fr/v1/pictures/8bcda70aabbc4724af35d321c27e93c4-feux-artifice.png?client_id=cmsfront&sign=fa1b7c4425775fde920381436d16d09ed0293825d09bab0eaf412382a554d8c3
https://media.ouest-france.fr/v1/fonts/4f0e6246807b057eb7a843cbb8dc25fc-filtrer.svghttps://media.ouest-france.fr/v1/pictures/43c15cfccc16a366840d6e7c9e15b11e-filtrer.png?client_id=cmsfront&sign=c90111f2dcabe8c67492b71db347deafeedfd84d032a33c5a5cb00bf6d0be39a
https://media.ouest-france.fr/v1/fonts/417034d2987da52e53794f8634e5df61-flamme-olympique.svghttps://media.ouest-france.fr/v1/pictures/270f12784a371d27111d8baa1d6ef38e-flamme-olympique.png?client_id=cmsfront&sign=321f4bcde94d267eb290e3e69c32831bfa9ab210e87cc5fd618e7f418b638ca6
https://media.ouest-france.fr/v1/fonts/825c2cd7af6eca090aa9ef650ea0c2c3-football.svghttps://media.ouest-france.fr/v1/pictures/0a7fa9d6a7e534e786007aeb5792a791-football.png?client_id=cmsfront&sign=0b9971fc9bae40f11f5a0af98f1923879685bf06ce303b4431a55e0315db79f6
https://media.ouest-france.fr/v1/fonts/5a2a01feac35418d9876266ede24f4c2-france.svghttps://media.ouest-france.fr/v1/pictures/0f9a71a4055cb47aeca20ac5b857b308-france.png?client_id=cmsfront&sign=74c740dfb39914588c59a03255cbafc7617dbc31dffa4f39ef941b0240a13e9c
https://media.ouest-france.fr/v1/fonts/aa0f2ebfa50a3dd72ff78a3787f5d298-guider.svghttps://media.ouest-france.fr/v1/pictures/b9ffd71324fe9a55aedf3533d48fa587-guider.png?client_id=cmsfront&sign=9b1ce6c5d0ecc5de6799f77c1cdfa4b9570202bd5862f68742ee1a8b321c24a4
https://media.ouest-france.fr/v1/fonts/798f35fbb3f6a5c050d0418ba0ede3d6-j-aime.svghttps://media.ouest-france.fr/v1/pictures/cc39627510195441f4352dd3c0214050-j-aime.png?client_id=cmsfront&sign=1d9599f889a935e1968538a7af36cf6a317cf6f805b10f95335d17d5447adef1
https://media.ouest-france.fr/v1/fonts/dd66841123b81831689e625080512b96-jeux.svghttps://media.ouest-france.fr/v1/pictures/0a202c6ebda8009469af7f3702e21da6-jeux.png?client_id=cmsfront&sign=43c993548bc51a57ac7fd3e96718feda54bb0ea436d0389f7bec7f57129cf221
https://media.ouest-france.fr/v1/fonts/228b9ec70f961f12a5c3bafa9d30cf5f-journal.svghttps://media.ouest-france.fr/v1/pictures/23bba5157d477ebd94433e35bbe0a7b7-journal.png?client_id=cmsfront&sign=62fff623724890972c21d39c75eb9578bbeafc66b58aa0ce3f923f3ce087f54f
https://media.ouest-france.fr/v1/fonts/8aa0ab2d3fd961007c0bac3fca491b27-journal-mobile.svghttps://media.ouest-france.fr/v1/pictures/69125943ba056912d374f87e6a7b4e4c-journal-mobile.png?client_id=cmsfront&sign=e41fa051f74a70f89b3e71839accec572dd8cd0929e7d14cb0f17ad24391da23
https://media.ouest-france.fr/v1/fonts/500c2a8101892145bd0833f398444123-lecture.svghttps://media.ouest-france.fr/v1/pictures/1d6702bf930eec35075e3950f1c574b3-lecture.png?client_id=cmsfront&sign=2cd46e1321d7223b3cc8f55cbfad8e72b6f3e810257a97628115838b892a4b47
https://media.ouest-france.fr/v1/fonts/41a0de22d99650084ef8a0e5e1325555-livre.svghttps://media.ouest-france.fr/v1/pictures/2548fa9f8d1afaae9a702589c32c11be-livre.png?client_id=cmsfront&sign=0661c9969764e6daeec0956363190d248034d2a3e18f2af5e6a571e544486bf6
https://media.ouest-france.fr/v1/fonts/c9d35f5d61474d4c11a5cc2fcce96674-megaphone.svghttps://media.ouest-france.fr/v1/pictures/77a6ddf9a34a9ccf8d29ef5b894783ca-megaphone.png?client_id=cmsfront&sign=dee67a1a0584e54715db19aa59d5786db1d9ba88a668e37c61588ff8443ab96e
https://media.ouest-france.fr/v1/fonts/f0df60f237c03707c2b9b6d343586daa-mer.svghttps://media.ouest-france.fr/v1/pictures/69550efd9465704508c47089068fe153-mer.png?client_id=cmsfront&sign=ffb81346bddee1438fbb52f73f54367d11e967fad04362a026b917503e174384
https://media.ouest-france.fr/v1/fonts/def2d66341d37daf8816817be0c81b32-meteo.svghttps://media.ouest-france.fr/v1/pictures/4e218b5bf96a36870a1ab90df26f02a4-meteo.png?client_id=cmsfront&sign=54711128e61290af48563bd804461fae55f12dd9efb7374086108d1f63e95032
https://media.ouest-france.fr/v1/fonts/ba4519be24453f9b7326ba1736fe0921-offrir.svghttps://media.ouest-france.fr/v1/pictures/609e25419f0260787ff87d6ae2a7732f-offrir.png?client_id=cmsfront&sign=c6f75dc13f37ad7220dcad5c43334f2c81d6d5f68bbd4e0ec1fbeb3cda533cb1
https://media.ouest-france.fr/v1/fonts/8a1ecdf3a47d1950e9aa41c403058e4f-panier.svghttps://media.ouest-france.fr/v1/pictures/b58757b9c932fa182c1482128f2fae62-panier.png?client_id=cmsfront&sign=0204e9b8c1c5346e4ac045b66875c51c9ffa70fccc3d6471b1d5e352d0354cf1
https://media.ouest-france.fr/v1/fonts/b11ce5b1264e1968bc0fca4468da917b-parametres.svghttps://media.ouest-france.fr/v1/pictures/425134bc91c7fc81853c367c1682f017-parametres.png?client_id=cmsfront&sign=8428ce4a04bb3fb63ff576697814fa96d6a85c1b784dc6551b4ee210575db37b
https://media.ouest-france.fr/v1/fonts/0608022149d9693a8ea3bbcae245d874-piece-jointe.svghttps://media.ouest-france.fr/v1/pictures/0a13a22cc2a4f00a3f89a250eeb2d6f5-piece-jointe.png?client_id=cmsfront&sign=c57ace57c8ce15326bdf18603f8a313c3380a808aaecaced1e8689b65ff8b0a6
https://media.ouest-france.fr/v1/fonts/0d87da35efffe0b9bd70adbfc081bf6e-question.svghttps://media.ouest-france.fr/v1/pictures/739d1785fa477ba97b82e44743bb6e1a-question.png?client_id=cmsfront&sign=0036ab52e46a3e461f2de2a8fefef5a0379542b90e56c0e52bee29a2a2b2d432
https://media.ouest-france.fr/v1/fonts/3ecf2bd9f40ae293fd20f09719c0dc30-recycler.svghttps://media.ouest-france.fr/v1/pictures/71eed38c0b88a58d746e30fe53ece1e8-recycler.png?client_id=cmsfront&sign=ab2e4370291c8c6b6a3dd0d24a2056e4c7c182105964d2701776f915d5e42ba8
https://media.ouest-france.fr/v1/fonts/cd2b36204b6fa48c9c8b1f0ba6795dbf-resultats.svghttps://media.ouest-france.fr/v1/pictures/761005ce1284e2bf949fca90404477a1-resultats.png?client_id=cmsfront&sign=1c9b275dc54b657d12cf7acb69841ec0c61cd992847f6ca867469908cbfb7060
https://media.ouest-france.fr/v1/fonts/2cf66374ae0b027094db33ca16ac7f47-sport.svghttps://media.ouest-france.fr/v1/pictures/f2b741c9c373cb8076031ee852aef0da-sport.png?client_id=cmsfront&sign=8b188fc1a2f2ad565adae754b34e70b0476f35478f95f5c668db568a0f19a5b0
https://media.ouest-france.fr/v1/fonts/60443286ad1651b964275edce2f3d75f-sport-amateur.svghttps://media.ouest-france.fr/v1/pictures/43cb381c55461b597acfc9eb27c4c4bd-sport-amateur.png?client_id=cmsfront&sign=511d0e12c610538e8eeb61dec13e0662094fd3f0f2e8ea5509ca66c9ee71c351
https://media.ouest-france.fr/v1/fonts/667563e94edc143b8ff9d67fc1bf3b2c-statistiques.svghttps://media.ouest-france.fr/v1/pictures/836b6e795f8275dd799e8c96735a55fa-statistiques.png?client_id=cmsfront&sign=16d972de5c8cbc4e9e9ffb454390087a5fe97f236abd88feccb58d0389602575
https://media.ouest-france.fr/v1/fonts/65577e487419339ceda0c147a70e06c2-taille-texte.svghttps://media.ouest-france.fr/v1/pictures/60544c8b7e124d50e9bf28cea98db31c-taille-texte.png?client_id=cmsfront&sign=f2563afd7fafc0b8db93b4b4ddeeb1edc83353af0d90a9ae8a6130c3135f36ff
https://media.ouest-france.fr/v1/fonts/11d4ab53ed55d854184afae2242fb367-ticket.svghttps://media.ouest-france.fr/v1/pictures/03df60aea53bc0fc13ae1806dec266e7-ticket.png?client_id=cmsfront&sign=7c6c7cb08a81692e44ea418cdde01ef9f4971391729b1c9fffca3e1a5dc4a248
https://media.ouest-france.fr/v1/fonts/2220307967d38e51ba6bf545d5ed3b1c-tv.svghttps://media.ouest-france.fr/v1/pictures/d7bd6554cff46a76e8ae86d9a7d35506-tv.png?client_id=cmsfront&sign=19e49de8d92df036d56e4d9ff64cf18265ee7510571af2ec8b9d1a7378d60f0e
https://media.ouest-france.fr/v1/fonts/2349b8ca84d260ea311ae0dfcfa7545d-voile.svghttps://media.ouest-france.fr/v1/pictures/56731a40ab3076a39a75c048d85d7c68-voile.png?client_id=cmsfront&sign=e2119fe14bc1bbb17ec521d0f333299852e01412fb19a52955b11e575e713166Téléchargement
Vous pouvez télécharger ces icônes au format SVG ou PNG :
Les drapeaux
Le Studio propose 214 drapeaux. Ils sont téléchargeables au format SVG ou intégrables via le composant Drapeaux du framework.
France
Écosse
Tuvalu
Ouzbekistan
Nicaragua
[etc…]