Iconos de tarjetas de crédito gratis: logos de pago en SVG (2026)

Los iconos de tarjetas de crédito son esos logos pequeños de Visa, Mastercard o PayPal. Los ves en el pie de una tienda online y en la página de pago. Le dicen al cliente, de un vistazo, cómo puede pagar. Y le dan confianza justo antes de comprar.

Respuesta rápida: para los logos de marca, usa un pack en SVG con licencia abierta, como los de Datatrans o Aaron Fagan en GitHub. Si los quieres en un solo color, Simple Icons. Para un icono genérico de tarjeta, sin marca, tienes Flaticon, SVG Repo o Tabler Icons. Todo lo de esta lista es gratis y lo he revisado en su página de descarga.

Iconos de tarjetas de crédito gratis: logos de pago en SVG

Son los que necesitas para indicar qué tarjetas y métodos de pago aceptas. Todos están en SVG, el formato que mejor queda en una web: pesa poco y se ve nítido en cualquier pantalla.

Iconos genéricos de tarjeta de crédito

A veces no necesitas una marca, sino el dibujo de una tarjeta: para el botón «Pagar con tarjeta», un paso del checkout o una app. Estos son gratis y sin logos de terceros.

Qué métodos de pago mostrar en tu tienda

La regla de oro: muestra solo los que de verdad aceptas. Un logo de Amex en el pie y un checkout que lo rechaza es la forma más rápida de perder una venta.

Si vendes en España, lo habitual es mostrar Visa y Mastercard, PayPal y, cada vez más, Bizum, Apple Pay y Google Pay. En México y otros países de Latinoamérica pesan más los pagos en efectivo y las tarjetas locales: revisa qué te ofrece tu pasarela de pago.

¿Y Bizum? No está en ninguna de las librerías anteriores. Pídeselo a tu banco o a tu pasarela de pago (Redsys, Stripe…). Suelen incluirlo en su documentación de integración, junto con sus normas de uso.

Cómo usar los logos de pago sin problemas

• Usa la versión actual. Mastercard quitó su nombre del logo en 2019: hoy son solo los dos círculos. Muchos packs antiguos siguen con el diseño viejo.
• No los modifiques. Nada de cambiar colores, estirarlos o recortarlos. Si quieres que todos vayan a juego, usa la versión monocroma que ofrecen los propios packs.
• Misma altura para todos. Entre 24 y 32 píxeles de alto en el pie de página queda bien. Lo que desentona es que un logo se vea el doble de grande que el resto.
• Cuidado con Maestro. Mastercard dejó de emitir tarjetas Maestro nuevas en Europa en julio de 2023. Si tu pasarela ya no lo muestra, quítalo tú también.
• Pon texto alternativo. Un lector de pantalla tiene que poder decir «Visa», no «imagen».

Cómo añadir los iconos de pago a tu web

En WordPress con WooCommerce, las pasarelas de pago (Stripe, PayPal, Redsys) ya muestran sus logos en el checkout. Para el pie de página, sube los SVG a la biblioteca de medios y usa un bloque de imagen o un bloque HTML.

En Shopify, muchos temas, como Dawn, tienen la opción «Mostrar iconos de pago» en los ajustes del pie de página. Shopify pone automáticamente los métodos que tienes activados.

En HTML, basta con una lista de imágenes. Este código es accesible y adapta la fila al ancho de la pantalla:

<ul class="metodos-pago" aria-label="Métodos de pago aceptados">
  <li><img src="/iconos/visa.svg" alt="Visa" height="28"></li>
  <li><img src="/iconos/mastercard.svg" alt="Mastercard" height="28"></li>
  <li><img src="/iconos/paypal.svg" alt="PayPal" height="28"></li>
</ul>

<style>
  .metodos-pago { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; }
  .metodos-pago img { height: 28px; width: auto; display: block; }
</style>

Si estás diseñando el pie de tu tienda, aquí tienes ejemplos de footer que colocan bien los métodos de pago.

Preguntas frecuentes

¿Puedo poner los logos de Visa y Mastercard en mi web?

Sí, para indicar que aceptas esos pagos. Es justo el uso que contemplan sus normas de marca. Lo que no puedes es usarlos de forma que parezca que la marca te patrocina, ni modificarlos. No soy abogada: si tienes dudas con un caso concreto, revisa las normas en su centro de marca.

¿SVG o PNG?

SVG para la web: pesa menos, se ve nítido en pantallas retina y puedes cambiar el tamaño sin perder calidad. PNG solo si tu herramienta no acepta SVG, como algunos editores de email.

¿Dónde descargo iconos de tarjetas en PNG?

Flaticon y SVG Repo te dan la opción de PNG al descargar. También tienes iconos de tarjeta de crédito en PNG con fondo transparente en Vecteezy, muchos gratis.

¿Qué tamaño deben tener los iconos de pago?

En el pie de página, entre 24 y 32 píxeles de alto. En el checkout, junto al botón de pago, pueden ser algo mayores. Lo importante es que todos tengan la misma altura.

¿Sirven los iconos de tarjetas antiguos?

Mejor no. Muchos packs de hace diez años llevan el logo viejo de Mastercard, Maestro o tarjetas que ya casi no se usan. En una tienda, un logo desfasado da sensación de web abandonada.

Conclusión

Para los logos de marca, empieza por Payment Logos de Datatrans: es la colección más completa y está al día. Si quieres un estilo uniforme en un color, Simple Icons. Y para un icono de tarjeta sin marca, Flaticon o Tabler. Pon solo los métodos que aceptas, todos a la misma altura y con su texto alternativo.

---

Más iconos y recursos para tiendas online

• Iconos ecommerce gratis: carrito, envío, pago seguro
• Tipografías de iconos gratis (Font Awesome y más)
• Ejemplos de footer para inspirarte
• Por qué tu tienda online no vende y cómo solucionarlo
• Shopify o WooCommerce: cuál elegir para tu tienda

Este artículo incluye algunos enlaces de afiliado: si compras a través de ellos, recibo una pequeña comisión sin coste adicional para ti.