Security Blue

The sixteen items are Lock, Unlock, Shield, Key, Fingerprint, Eye, Eye off, Safe, Firewall, Certificate, Verified badge, Warning, Info, Question, Life ring and First aid kit. Lock and Unlock work as a state pair, Eye and Eye off suit a password visibility toggle, and Warning, Info and Question cover the usual alert levels.

Files arrive as transparent PNG and WebP, with widths from 203 to 261 px and heights from 165 to 260 px across the set, so the ring-shaped Life ring and the boxy Safe look balanced side by side.

Where this set fits

• Account privacy settings page illustration
• Two-factor authentication walkthrough in a banking onboarding flow
• Trust-and-safety section on a startup security page
• Help-center article headers for password and recovery topics

Integrate with one image and shared CSS

Includes a WebP sprite at 128px display size, shared animation styles, a React component and original files. The sprite renders the collection with one image request. Use individual WebP files when you need native resolution.

<link rel="stylesheet" href="./assets.css">
<span class="cc-asset cc-lock-security-blue cc-float" role="img" aria-label="Lock"></span>

cc-float · cc-pulse · cc-pop · cc-swing · cc-spin. Respects reduced motion and needs no animation library.