swiper logo
swiper from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- swiper
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
The same logo in other sets
Use the swiper logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12s12-5.373 12-12S18.627 0 12 0m4.884 17.908a4.3 4.3 0 0 1-1.092 1.488a4.8 4.8 0 0 1-1.644.936q-.948.324-2.028.324c-1.08 0-1.368-.1-1.944-.3q-.864-.3-1.536-.792c-.672-.492-.832-.704-1.152-1.128a6.6 6.6 0 0 1-.768-1.284l1.68-1.008q.216.504.564.972t.804.828a3.7 3.7 0 0 0 2.328.792q.6 0 1.164-.168t.996-.504t.696-.828t.264-1.164q0-.648-.252-1.116a3 3 0 0 0-.684-.84a5 5 0 0 0-1.032-.672q-.6-.3-1.296-.636a45 45 0 0 1-1.644-.816a7.6 7.6 0 0 1-1.488-1.008a4.8 4.8 0 0 1-1.068-1.332q-.408-.756-.408-1.764q0-.84.312-1.668a4.5 4.5 0 0 1 .912-1.476q.6-.648 1.5-1.056c.9-.408 1.3-.408 2.1-.408q.888 0 1.644.228a6 6 0 0 1 2.412 1.38q.456.432.744.84l-1.512 1.224a4.2 4.2 0 0 0-1.284-1.188a4.2 4.2 0 0 0-.924-.408a3.6 3.6 0 0 0-1.08-.156q-.696 0-1.212.216a2.7 2.7 0 0 0-.876.576q-.36.36-.54.828t-.18.948q0 .6.264 1.044t.744.828c.48.384.712.504 1.176.744q.696.36 1.56.744q.96.432 1.74.9t1.32 1.02t.828 1.248t.288 1.632q0 1.104-.396 1.98"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsSwiper(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12s12-5.373 12-12S18.627 0 12 0m4.884 17.908a4.3 4.3 0 0 1-1.092 1.488a4.8 4.8 0 0 1-1.644.936q-.948.324-2.028.324c-1.08 0-1.368-.1-1.944-.3q-.864-.3-1.536-.792c-.672-.492-.832-.704-1.152-1.128a6.6 6.6 0 0 1-.768-1.284l1.68-1.008q.216.504.564.972t.804.828a3.7 3.7 0 0 0 2.328.792q.6 0 1.164-.168t.996-.504t.696-.828t.264-1.164q0-.648-.252-1.116a3 3 0 0 0-.684-.84a5 5 0 0 0-1.032-.672q-.6-.3-1.296-.636a45 45 0 0 1-1.644-.816a7.6 7.6 0 0 1-1.488-1.008a4.8 4.8 0 0 1-1.068-1.332q-.408-.756-.408-1.764q0-.84.312-1.668a4.5 4.5 0 0 1 .912-1.476q.6-.648 1.5-1.056c.9-.408 1.3-.408 2.1-.408q.888 0 1.644.228a6 6 0 0 1 2.412 1.38q.456.432.744.84l-1.512 1.224a4.2 4.2 0 0 0-1.284-1.188a4.2 4.2 0 0 0-.924-.408a3.6 3.6 0 0 0-1.08-.156q-.696 0-1.212.216a2.7 2.7 0 0 0-.876.576q-.36.36-.54.828t-.18.948q0 .6.264 1.044t.744.828c.48.384.712.504 1.176.744q.696.36 1.56.744q.96.432 1.74.9t1.32 1.02t.828 1.248t.288 1.632q0 1.104-.396 1.98"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12s12-5.373 12-12S18.627 0 12 0m4.884 17.908a4.3 4.3 0 0 1-1.092 1.488a4.8 4.8 0 0 1-1.644.936q-.948.324-2.028.324c-1.08 0-1.368-.1-1.944-.3q-.864-.3-1.536-.792c-.672-.492-.832-.704-1.152-1.128a6.6 6.6 0 0 1-.768-1.284l1.68-1.008q.216.504.564.972t.804.828a3.7 3.7 0 0 0 2.328.792q.6 0 1.164-.168t.996-.504t.696-.828t.264-1.164q0-.648-.252-1.116a3 3 0 0 0-.684-.84a5 5 0 0 0-1.032-.672q-.6-.3-1.296-.636a45 45 0 0 1-1.644-.816a7.6 7.6 0 0 1-1.488-1.008a4.8 4.8 0 0 1-1.068-1.332q-.408-.756-.408-1.764q0-.84.312-1.668a4.5 4.5 0 0 1 .912-1.476q.6-.648 1.5-1.056c.9-.408 1.3-.408 2.1-.408q.888 0 1.644.228a6 6 0 0 1 2.412 1.38q.456.432.744.84l-1.512 1.224a4.2 4.2 0 0 0-1.284-1.188a4.2 4.2 0 0 0-.924-.408a3.6 3.6 0 0 0-1.08-.156q-.696 0-1.212.216a2.7 2.7 0 0 0-.876.576q-.36.36-.54.828t-.18.948q0 .6.264 1.044t.744.828c.48.384.712.504 1.176.744q.696.36 1.56.744q.96.432 1.74.9t1.32 1.02t.828 1.248t.288 1.632q0 1.104-.396 1.98"/></svg> </template>
CSS
.icon-swiper {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%200C5.373%200%200%205.373%200%2012s5.373%2012%2012%2012s12-5.373%2012-12S18.627%200%2012%200m4.884%2017.908a4.3%204.3%200%200%201-1.092%201.488a4.8%204.8%200%200%201-1.644.936q-.948.324-2.028.324c-1.08%200-1.368-.1-1.944-.3q-.864-.3-1.536-.792c-.672-.492-.832-.704-1.152-1.128a6.6%206.6%200%200%201-.768-1.284l1.68-1.008q.216.504.564.972t.804.828a3.7%203.7%200%200%200%202.328.792q.6%200%201.164-.168t.996-.504t.696-.828t.264-1.164q0-.648-.252-1.116a3%203%200%200%200-.684-.84a5%205%200%200%200-1.032-.672q-.6-.3-1.296-.636a45%2045%200%200%201-1.644-.816a7.6%207.6%200%200%201-1.488-1.008a4.8%204.8%200%200%201-1.068-1.332q-.408-.756-.408-1.764q0-.84.312-1.668a4.5%204.5%200%200%201%20.912-1.476q.6-.648%201.5-1.056c.9-.408%201.3-.408%202.1-.408q.888%200%201.644.228a6%206%200%200%201%202.412%201.38q.456.432.744.84l-1.512%201.224a4.2%204.2%200%200%200-1.284-1.188a4.2%204.2%200%200%200-.924-.408a3.6%203.6%200%200%200-1.08-.156q-.696%200-1.212.216a2.7%202.7%200%200%200-.876.576q-.36.36-.54.828t-.18.948q0%20.6.264%201.044t.744.828c.48.384.712.504%201.176.744q.696.36%201.56.744q.96.432%201.74.9t1.32%201.02t.828%201.248t.288%201.632q0%201.104-.396%201.98%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%200C5.373%200%200%205.373%200%2012s5.373%2012%2012%2012s12-5.373%2012-12S18.627%200%2012%200m4.884%2017.908a4.3%204.3%200%200%201-1.092%201.488a4.8%204.8%200%200%201-1.644.936q-.948.324-2.028.324c-1.08%200-1.368-.1-1.944-.3q-.864-.3-1.536-.792c-.672-.492-.832-.704-1.152-1.128a6.6%206.6%200%200%201-.768-1.284l1.68-1.008q.216.504.564.972t.804.828a3.7%203.7%200%200%200%202.328.792q.6%200%201.164-.168t.996-.504t.696-.828t.264-1.164q0-.648-.252-1.116a3%203%200%200%200-.684-.84a5%205%200%200%200-1.032-.672q-.6-.3-1.296-.636a45%2045%200%200%201-1.644-.816a7.6%207.6%200%200%201-1.488-1.008a4.8%204.8%200%200%201-1.068-1.332q-.408-.756-.408-1.764q0-.84.312-1.668a4.5%204.5%200%200%201%20.912-1.476q.6-.648%201.5-1.056c.9-.408%201.3-.408%202.1-.408q.888%200%201.644.228a6%206%200%200%201%202.412%201.38q.456.432.744.84l-1.512%201.224a4.2%204.2%200%200%200-1.284-1.188a4.2%204.2%200%200%200-.924-.408a3.6%203.6%200%200%200-1.08-.156q-.696%200-1.212.216a2.7%202.7%200%200%200-.876.576q-.36.36-.54.828t-.18.948q0%20.6.264%201.044t.744.828c.48.384.712.504%201.176.744q.696.36%201.56.744q.96.432%201.74.9t1.32%201.02t.828%201.248t.288%201.632q0%201.104-.396%201.98%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/swiper.svg?color=%231a73e8&size=48
