52 Two-Tone Vectors • Layered Translucency
Solar Duotone UI Icons
Elegant two-tone vector icons featuring primary structural lines with secondary translucent background fills. Engineered for high-conversion SaaS and modern web apps.
Solar Duotone UI 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 { ArrowRightIcon } from './icons';
export default function CTAButton() {
return (
<button className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg">
Get Started <ArrowRightIcon size={18} />
</button>
);
}
Flutter & Mobile
Uses standard flutter_svg with color filters and size constraints.
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
// Use directly in your Flutter widget tree:
ArrowRightIcon(size: 24, color: Color(0xFFC5453E));
React Native
Engineered for react-native-svg with zero dependency bloat.
import React from 'react';
import { ArrowRightIcon } from './icons';
<ArrowRightIcon size={20} color="#C5453E" strokeWidth={2} />