80 Precision Vectors • Live Stroke & Color Customizer
Gaming Vector Icons
Precision 24×24 pixel-grid stroke vectors engineered for game UI, streaming overlays, React, Next.js, Flutter, and web applications. Customize stroke weights, colors, and export instantly.
Gaming Vector Icons
Click any icon to inspect and copy code for React, Flutter, React Native, Vue, or download .SVG.
How to Use in Your Projects
Copy-paste ready across React, Next.js, Flutter, React Native, and HTML.
React & Next.js
Import directly into your JSX/TSX components with Tailwind CSS support.
import React from 'react';
export function GamepadIcon({ size = 24, color = 'currentColor', strokeWidth = 2, ...props }) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path d="M6 12h4M8 10v4m7-2h.01m3-2h.01M2 13a5 5 0 0 1 5-5h10a5 5 0 0 1 5 5v2a4 4 0 0 1-7 2.5L13.5 16h-3L9 17.5A4 4 0 0 1 2 15v-2z" />
</svg>
);
}
Flutter & Mobile
Uses standard flutter_svg with color filters and size constraints.
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
Widget buildGamepadIcon({double size = 24.0, Color? color}) {
return SvgPicture.string(
'''<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 12h4M8 10v4m7-2h.01m3-2h.01M2 13a5 5 0 0 1 5-5h10a5 5 0 0 1 5 5v2a4 4 0 0 1-7 2.5L13.5 16h-3L9 17.5A4 4 0 0 1 2 15v-2z" />
</svg>''',
width: size,
height: size,
colorFilter: color != null ? ColorFilter.mode(color, BlendMode.srcIn) : null,
);
}
React Native
Engineered for react-native-svg with zero dependency bloat.
import React from 'react';
import Svg, { Path } from 'react-native-svg';
export function GamepadIcon({ size = 24, color = '#C5453E', strokeWidth = 2, ...props }) {
return (
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" {...props}>
<Path d="M6 12h4M8 10v4m7-2h.01m3-2h.01M2 13a5 5 0 0 1 5-5h10a5 5 0 0 1 5 5v2a4 4 0 0 1-7 2.5L13.5 16h-3L9 17.5A4 4 0 0 1 2 15v-2z" />
</Svg>
);
}