Add icons to this collection by clicking the heart icon.
Road icon - also known as transport, highway, broken line, road, transportation, miscellaneous, and maps and location. Created in a clean lineal gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
viewBox="0 0 496.355 496.355"
>
<linearGradient
id="a"
x1="-64.313"
x2="11.177"
y1="570.152"
y2="645.643"
gradientTransform="matrix(8 0 0 -8 425.591 5014.597)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#003f8a" />
<stop offset=".148" stop-color="#024089" />
<stop offset=".201" stop-color="#094485" />
<stop offset=".239" stop-color="#144a7f" />
<stop offset=".269" stop-color="#255476" />
<stop offset=".296" stop-color="#3b606a" />
<stop offset=".319" stop-color="#576f5b" />
<stop offset=".34" stop-color="#77814a" />
<stop offset=".359" stop-color="#9d9635" />
<stop offset=".377" stop-color="#c8ae1e" />
<stop offset=".393" stop-color="#f6c805" />
<stop offset=".396" stop-color="#ffcd00" />
<stop offset=".402" stop-color="#e2c91b" />
<stop offset=".414" stop-color="#b3c447" />
<stop offset=".426" stop-color="#88bf6f" />
<stop offset=".439" stop-color="#63ba92" />
<stop offset=".454" stop-color="#44b6af" />
<stop offset=".469" stop-color="#2bb3c6" />
<stop offset=".486" stop-color="#18b1d9" />
<stop offset=".506" stop-color="#0aafe5" />
<stop offset=".531" stop-color="#02aeed" />
<stop offset=".577" stop-color="#00aeef" />
<stop offset=".608" stop-color="#009de0" />
<stop offset=".682" stop-color="#007bc1" />
<stop offset=".758" stop-color="#0061a9" />
<stop offset=".835" stop-color="#004e98" />
<stop offset=".915" stop-color="#00438d" />
<stop offset="1" stop-color="#003f8a" />
</linearGradient>
<path
d="M149.257.249a8.048 8.048 0 0 0-8.984 6.872l-64 480a8 8 0 1 0 15.856 2.112l64-480a8 8 0 0 0-6.872-8.984z"
fill="url(#a)"
/>
<linearGradient
id="b"
x1="-47.829"
x2="27.656"
y1="553.672"
y2="629.157"
gradientTransform="matrix(8 0 0 -8 425.591 5014.597)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#003f8a" />
<stop offset=".148" stop-color="#024089" />
<stop offset=".201" stop-color="#094485" />
<stop offset=".239" stop-color="#144a7f" />
<stop offset=".269" stop-color="#255476" />
<stop offset=".296" stop-color="#3b606a" />
<stop offset=".319" stop-color="#576f5b" />
<stop offset=".34" stop-color="#77814a" />
<stop offset=".359" stop-color="#9d9635" />
<stop offset=".377" stop-color="#c8ae1e" />
<stop offset=".393" stop-color="#f6c805" />
<stop offset=".396" stop-color="#ffcd00" />
<stop offset=".402" stop-color="#e2c91b" />
<stop offset=".414" stop-color="#b3c447" />
<stop offset=".426" stop-color="#88bf6f" />
<stop offset=".439" stop-color="#63ba92" />
<stop offset=".454" stop-color="#44b6af" />
<stop offset=".469" stop-color="#2bb3c6" />
<stop offset=".486" stop-color="#18b1d9" />
<stop offset=".506" stop-color="#0aafe5" />
<stop offset=".531" stop-color="#02aeed" />
<stop offset=".577" stop-color="#00aeef" />
<stop offset=".608" stop-color="#009de0" />
<stop offset=".682" stop-color="#007bc1" />
<stop offset=".758" stop-color="#0061a9" />
<stop offset=".835" stop-color="#004e98" />
<stop offset=".915" stop-color="#00438d" />
<stop offset="1" stop-color="#003f8a" />
</linearGradient>
<path
d="M356.129 7.121a8 8 0 0 0-8.831-7.072 8 8 0 0 0-7.025 9.184l64 480a8 8 0 0 0 15.856-2.112l-64-480z"
fill="url(#b)"
/>
<linearGradient
id="c"
x1="-42.563"
x2="32.917"
y1="548.412"
y2="623.897"
gradientTransform="matrix(8 0 0 -8 425.591 5014.597)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#003f8a" />
<stop offset=".148" stop-color="#024089" />
<stop offset=".201" stop-color="#094485" />
<stop offset=".239" stop-color="#144a7f" />
<stop offset=".269" stop-color="#255476" />
<stop offset=".296" stop-color="#3b606a" />
<stop offset=".319" stop-color="#576f5b" />
<stop offset=".34" stop-color="#77814a" />
<stop offset=".359" stop-color="#9d9635" />
<stop offset=".377" stop-color="#c8ae1e" />
<stop offset=".393" stop-color="#f6c805" />
<stop offset=".396" stop-color="#ffcd00" />
<stop offset=".402" stop-color="#e2c91b" />
<stop offset=".414" stop-color="#b3c447" />
<stop offset=".426" stop-color="#88bf6f" />
<stop offset=".439" stop-color="#63ba92" />
<stop offset=".454" stop-color="#44b6af" />
<stop offset=".469" stop-color="#2bb3c6" />
<stop offset=".486" stop-color="#18b1d9" />
<stop offset=".506" stop-color="#0aafe5" />
<stop offset=".531" stop-color="#02aeed" />
<stop offset=".577" stop-color="#00aeef" />
<stop offset=".608" stop-color="#009de0" />
<stop offset=".682" stop-color="#007bc1" />
<stop offset=".758" stop-color="#0061a9" />
<stop offset=".835" stop-color="#004e98" />
<stop offset=".915" stop-color="#00438d" />
<stop offset="1" stop-color="#003f8a" />
</linearGradient>
<path
d="M244.201 448.177a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8z"
fill="url(#c)"
/>
<linearGradient
id="d"
x1="-53.428"
x2="22.058"
y1="559.27"
y2="634.756"
gradientTransform="matrix(8 0 0 -8 425.591 5014.597)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#003f8a" />
<stop offset=".148" stop-color="#024089" />
<stop offset=".201" stop-color="#094485" />
<stop offset=".239" stop-color="#144a7f" />
<stop offset=".269" stop-color="#255476" />
<stop offset=".296" stop-color="#3b606a" />
<stop offset=".319" stop-color="#576f5b" />
<stop offset=".34" stop-color="#77814a" />
<stop offset=".359" stop-color="#9d9635" />
<stop offset=".377" stop-color="#c8ae1e" />
<stop offset=".393" stop-color="#f6c805" />
<stop offset=".396" stop-color="#ffcd00" />
<stop offset=".402" stop-color="#e2c91b" />
<stop offset=".414" stop-color="#b3c447" />
<stop offset=".426" stop-color="#88bf6f" />
<stop offset=".439" stop-color="#63ba92" />
<stop offset=".454" stop-color="#44b6af" />
<stop offset=".469" stop-color="#2bb3c6" />
<stop offset=".486" stop-color="#18b1d9" />
<stop offset=".506" stop-color="#0aafe5" />
<stop offset=".531" stop-color="#02aeed" />
<stop offset=".577" stop-color="#00aeef" />
<stop offset=".608" stop-color="#009de0" />
<stop offset=".682" stop-color="#007bc1" />
<stop offset=".758" stop-color="#0061a9" />
<stop offset=".835" stop-color="#004e98" />
<stop offset=".915" stop-color="#00438d" />
<stop offset="1" stop-color="#003f8a" />
</linearGradient>
<path
d="M244.201 263.297a8 8 0 0 0-8 8v46.216a8 8 0 0 0 16 0v-46.216a8 8 0 0 0-8-8z"
fill="url(#d)"
/>
<linearGradient
id="e"
x1="-47.652"
x2="27.838"
y1="553.491"
y2="628.979"
gradientTransform="matrix(8 0 0 -8 425.591 5014.597)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#003f8a" />
<stop offset=".148" stop-color="#024089" />
<stop offset=".201" stop-color="#094485" />
<stop offset=".239" stop-color="#144a7f" />
<stop offset=".269" stop-color="#255476" />
<stop offset=".296" stop-color="#3b606a" />
<stop offset=".319" stop-color="#576f5b" />
<stop offset=".34" stop-color="#77814a" />
<stop offset=".359" stop-color="#9d9635" />
<stop offset=".377" stop-color="#c8ae1e" />
<stop offset=".393" stop-color="#f6c805" />
<stop offset=".396" stop-color="#ffcd00" />
<stop offset=".402" stop-color="#e2c91b" />
<stop offset=".414" stop-color="#b3c447" />
<stop offset=".426" stop-color="#88bf6f" />
<stop offset=".439" stop-color="#63ba92" />
<stop offset=".454" stop-color="#44b6af" />
<stop offset=".469" stop-color="#2bb3c6" />
<stop offset=".486" stop-color="#18b1d9" />
<stop offset=".506" stop-color="#0aafe5" />
<stop offset=".531" stop-color="#02aeed" />
<stop offset=".577" stop-color="#00aeef" />
<stop offset=".608" stop-color="#009de0" />
<stop offset=".682" stop-color="#007bc1" />
<stop offset=".758" stop-color="#0061a9" />
<stop offset=".835" stop-color="#004e98" />
<stop offset=".915" stop-color="#00438d" />
<stop offset="1" stop-color="#003f8a" />
</linearGradient>
<path
d="M244.201 355.737a8 8 0 0 0-8 8v46.224a8 8 0 0 0 16 0v-46.224a8 8 0 0 0-8-8z"
fill="url(#e)"
/>
<linearGradient
id="f"
x1="-59.208"
x2="16.283"
y1="565.046"
y2="640.536"
gradientTransform="matrix(8 0 0 -8 425.591 5014.597)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#003f8a" />
<stop offset=".148" stop-color="#024089" />
<stop offset=".201" stop-color="#094485" />
<stop offset=".239" stop-color="#144a7f" />
<stop offset=".269" stop-color="#255476" />
<stop offset=".296" stop-color="#3b606a" />
<stop offset=".319" stop-color="#576f5b" />
<stop offset=".34" stop-color="#77814a" />
<stop offset=".359" stop-color="#9d9635" />
<stop offset=".377" stop-color="#c8ae1e" />
<stop offset=".393" stop-color="#f6c805" />
<stop offset=".396" stop-color="#ffcd00" />
<stop offset=".402" stop-color="#e2c91b" />
<stop offset=".414" stop-color="#b3c447" />
<stop offset=".426" stop-color="#88bf6f" />
<stop offset=".439" stop-color="#63ba92" />
<stop offset=".454" stop-color="#44b6af" />
<stop offset=".469" stop-color="#2bb3c6" />
<stop offset=".486" stop-color="#18b1d9" />
<stop offset=".506" stop-color="#0aafe5" />
<stop offset=".531" stop-color="#02aeed" />
<stop offset=".577" stop-color="#00aeef" />
<stop offset=".608" stop-color="#009de0" />
<stop offset=".682" stop-color="#007bc1" />
<stop offset=".758" stop-color="#0061a9" />
<stop offset=".835" stop-color="#004e98" />
<stop offset=".915" stop-color="#00438d" />
<stop offset="1" stop-color="#003f8a" />
</linearGradient>
<path
d="M244.201 170.849a8 8 0 0 0-8 8v46.216a8 8 0 0 0 16 0v-46.216a8 8 0 0 0-8-8z"
fill="url(#f)"
/>
<linearGradient
id="g"
x1="-64.986"
x2="10.506"
y1="570.824"
y2="646.315"
gradientTransform="matrix(8 0 0 -8 425.591 5014.597)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#003f8a" />
<stop offset=".148" stop-color="#024089" />
<stop offset=".201" stop-color="#094485" />
<stop offset=".239" stop-color="#144a7f" />
<stop offset=".269" stop-color="#255476" />
<stop offset=".296" stop-color="#3b606a" />
<stop offset=".319" stop-color="#576f5b" />
<stop offset=".34" stop-color="#77814a" />
<stop offset=".359" stop-color="#9d9635" />
<stop offset=".377" stop-color="#c8ae1e" />
<stop offset=".393" stop-color="#f6c805" />
<stop offset=".396" stop-color="#ffcd00" />
<stop offset=".402" stop-color="#e2c91b" />
<stop offset=".414" stop-color="#b3c447" />
<stop offset=".426" stop-color="#88bf6f" />
<stop offset=".439" stop-color="#63ba92" />
<stop offset=".454" stop-color="#44b6af" />
<stop offset=".469" stop-color="#2bb3c6" />
<stop offset=".486" stop-color="#18b1d9" />
<stop offset=".506" stop-color="#0aafe5" />
<stop offset=".531" stop-color="#02aeed" />
<stop offset=".577" stop-color="#00aeef" />
<stop offset=".608" stop-color="#009de0" />
<stop offset=".682" stop-color="#007bc1" />
<stop offset=".758" stop-color="#0061a9" />
<stop offset=".835" stop-color="#004e98" />
<stop offset=".915" stop-color="#00438d" />
<stop offset="1" stop-color="#003f8a" />
</linearGradient>
<path
d="M244.201 78.401a8 8 0 0 0-8 8v46.224a8 8 0 0 0 16 0V86.401a8 8 0 0 0-8-8z"
fill="url(#g)"
/>
<linearGradient
id="h"
x1="-70.067"
x2="5.418"
y1="575.906"
y2="651.396"
gradientTransform="matrix(8 0 0 -8 425.591 5014.597)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#003f8a" />
<stop offset=".148" stop-color="#024089" />
<stop offset=".201" stop-color="#094485" />
<stop offset=".239" stop-color="#144a7f" />
<stop offset=".269" stop-color="#255476" />
<stop offset=".296" stop-color="#3b606a" />
<stop offset=".319" stop-color="#576f5b" />
<stop offset=".34" stop-color="#77814a" />
<stop offset=".359" stop-color="#9d9635" />
<stop offset=".377" stop-color="#c8ae1e" />
<stop offset=".393" stop-color="#f6c805" />
<stop offset=".396" stop-color="#ffcd00" />
<stop offset=".402" stop-color="#e2c91b" />
<stop offset=".414" stop-color="#b3c447" />
<stop offset=".426" stop-color="#88bf6f" />
<stop offset=".439" stop-color="#63ba92" />
<stop offset=".454" stop-color="#44b6af" />
<stop offset=".469" stop-color="#2bb3c6" />
<stop offset=".486" stop-color="#18b1d9" />
<stop offset=".506" stop-color="#0aafe5" />
<stop offset=".531" stop-color="#02aeed" />
<stop offset=".577" stop-color="#00aeef" />
<stop offset=".608" stop-color="#009de0" />
<stop offset=".682" stop-color="#007bc1" />
<stop offset=".758" stop-color="#0061a9" />
<stop offset=".835" stop-color="#004e98" />
<stop offset=".915" stop-color="#00438d" />
<stop offset="1" stop-color="#003f8a" />
</linearGradient>
<path
d="M244.201 8.177a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8z"
fill="url(#h)"
/>
</svg>
More icons in the same style and category