Database Setting icon
A hand-drawn database setting icon that animates on its own: an SVG on a 24px grid in thin, regular and bold strokes. Free to download and use in the apps you build (LumioUI License). It takes your text colour through currentColor.
- Category
- Files
- Grid
- 24 × 24
- Strokes
- 1.5 · 2 · 2.5
- Name
database-setting
Stroke weights and sizes
Use it in React Native
Paste the SVG into react-native-svg's SvgXml. The Icon component covers a curated set by name, and Animated Icons plays the motion natively.
TSX DatabaseSettingIcon.tsx
import { SvgXml } from "react-native-svg";
const DatabaseSettingIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><ellipse stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" cx="12" cy="5.3" rx="8.1" ry="3"></ellipse><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M3.9 5.4L3.9 18.3C3.9 20 7.5 21.4 12 21.4"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M20.1 5.4L20.1 11"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M3.9 12C3.9 13.7 7.5 15 12 15"></path><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M20.55 17.22Q20.3 17.6 20.12 17.75Q19.93 17.89 19.8 18.01Q19.67 18.13 19.64 18.25Q19.61 18.38 19.66 18.55Q19.71 18.72 19.8 18.93Q19.88 19.15 19.93 19.39Q19.99 19.63 19.96 19.84Q19.93 20.06 19.8 20.2Q19.66 20.33 19.45 20.36Q19.23 20.39 18.99 20.34Q18.75 20.28 18.54 20.2Q18.32 20.11 18.15 20.06Q17.98 20.01 17.86 20.04Q17.73 20.07 17.61 20.2Q17.49 20.33 17.34 20.52Q17.2 20.7 17.02 20.87Q16.84 21.03 16.64 21.11Q16.44 21.19 16.26 21.14Q16.07 21.09 15.94 20.92Q15.8 20.75 15.73 20.52Q15.65 20.28 15.62 20.05Q15.59 19.82 15.55 19.65Q15.51 19.48 15.41 19.38Q15.32 19.29 15.15 19.25Q14.98 19.21 14.75 19.18Q14.52 19.15 14.29 19.07Q14.05 19 13.88 18.87Q13.71 18.73 13.66 18.55Q13.61 18.36 13.69 18.16Q13.77 17.96 13.93 17.78Q14.1 17.6 14.29 17.45Q14.47 17.31 14.6 17.19Q14.73 17.07 14.76 16.95Q14.79 16.82 14.74 16.65Q14.69 16.48 14.61 16.27Q14.52 16.05 14.46 15.81Q14.41 15.57 14.44 15.36Q14.47 15.14 14.61 15Q14.74 14.87 14.96 14.84Q15.17 14.81 15.41 14.87Q15.65 14.92 15.86 15Q16.08 15.09 16.25 15.14Q16.42 15.19 16.55 15.16Q16.67 15.13 16.79 15Q16.91 14.87 17.05 14.68Q17.2 14.5 17.38 14.34Q17.56 14.17 17.76 14.09Q17.96 14.01 18.14 14.06Q18.33 14.11 18.46 14.28Q18.6 14.45 18.68 14.68Q18.75 14.92 18.78 15.15Q18.81 15.38 18.85 15.55Q18.89 15.72 18.98 15.82Q19.08 15.91 19.25 15.95Q19.42 15.99 19.65 16.02Q19.88 16.05 20.12 16.13Q20.35 16.2 20.52 16.34Q20.69 16.47 20.74 16.66Q20.79 16.84 20.55 17.22Z"></path><circle stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" cx="17.2" cy="17.6" r="1.1"></circle></g></svg>`;
<SvgXml xml={DatabaseSettingIcon} width={24} height={24} color="#111" />SVG code
The still glyph. The animated version, linked above, plays its motion on its own with SMIL, so it needs no script.
SVG database-setting.svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><ellipse stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" cx="12" cy="5.3" rx="8.1" ry="3"></ellipse><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M3.9 5.4L3.9 18.3C3.9 20 7.5 21.4 12 21.4"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M20.1 5.4L20.1 11"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M3.9 12C3.9 13.7 7.5 15 12 15"></path><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M20.55 17.22Q20.3 17.6 20.12 17.75Q19.93 17.89 19.8 18.01Q19.67 18.13 19.64 18.25Q19.61 18.38 19.66 18.55Q19.71 18.72 19.8 18.93Q19.88 19.15 19.93 19.39Q19.99 19.63 19.96 19.84Q19.93 20.06 19.8 20.2Q19.66 20.33 19.45 20.36Q19.23 20.39 18.99 20.34Q18.75 20.28 18.54 20.2Q18.32 20.11 18.15 20.06Q17.98 20.01 17.86 20.04Q17.73 20.07 17.61 20.2Q17.49 20.33 17.34 20.52Q17.2 20.7 17.02 20.87Q16.84 21.03 16.64 21.11Q16.44 21.19 16.26 21.14Q16.07 21.09 15.94 20.92Q15.8 20.75 15.73 20.52Q15.65 20.28 15.62 20.05Q15.59 19.82 15.55 19.65Q15.51 19.48 15.41 19.38Q15.32 19.29 15.15 19.25Q14.98 19.21 14.75 19.18Q14.52 19.15 14.29 19.07Q14.05 19 13.88 18.87Q13.71 18.73 13.66 18.55Q13.61 18.36 13.69 18.16Q13.77 17.96 13.93 17.78Q14.1 17.6 14.29 17.45Q14.47 17.31 14.6 17.19Q14.73 17.07 14.76 16.95Q14.79 16.82 14.74 16.65Q14.69 16.48 14.61 16.27Q14.52 16.05 14.46 15.81Q14.41 15.57 14.44 15.36Q14.47 15.14 14.61 15Q14.74 14.87 14.96 14.84Q15.17 14.81 15.41 14.87Q15.65 14.92 15.86 15Q16.08 15.09 16.25 15.14Q16.42 15.19 16.55 15.16Q16.67 15.13 16.79 15Q16.91 14.87 17.05 14.68Q17.2 14.5 17.38 14.34Q17.56 14.17 17.76 14.09Q17.96 14.01 18.14 14.06Q18.33 14.11 18.46 14.28Q18.6 14.45 18.68 14.68Q18.75 14.92 18.78 15.15Q18.81 15.38 18.85 15.55Q18.89 15.72 18.98 15.82Q19.08 15.91 19.25 15.95Q19.42 15.99 19.65 16.02Q19.88 16.05 20.12 16.13Q20.35 16.2 20.52 16.34Q20.69 16.47 20.74 16.66Q20.79 16.84 20.55 17.22Z"></path><circle stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" cx="17.2" cy="17.6" r="1.1"></circle></g></svg>On the web, link it straight from the CDN:
HTML index.html
<img src="https://cdn.lumioui.com/iconset/static/database-setting.svg" width="24" height="24" alt="Database Setting" />
