iOS System Search Icon in Different Colours/Sizes

[robbieduncan]

I know I'm probably not alone in wanting the built-in search icon in different colours/sizes than the system provides. As there seems to be know sensible way to capture the icon and colourise it ourselves (and scaling that would not be very good anyway) I've written the following code to deal with this. Feel free to use it if you want to

I would note that it's not quite pixel perfect at 24x24px (the size of a system tab-bar item) but the differences are only visible when zoomed way up: on the iPhone screen you can't tell.

.h file

//  Created by Robbie Duncan on 28/03/2010.
//  Copyright 2010 Robbie Duncan. All rights reserved.

#import <Foundation/Foundation.h>

@interface ColoredSystemIcons : NSObject
{
}

+ (UIImage *) searchIconOfSize:(CGSize) size inColor:(UIColor *) color;

@end

.m file

//  Created by Robbie Duncan on 28/03/2010.
//  Copyright 2010 Robbie Duncan. All rights reserved.
#import "ColoredSystemIcons.h"

@implementation ColoredSystemIcons

+ (UIImage *) searchIconOfSize:(CGSize) size inColor:(UIColor *) color
{
	// Get a context to draw in
	UIGraphicsBeginImageContext(size);
	
	// We need a reference to the context we've just created to use all the CG Methods.  I don't know why the above doesn't return the context...
	CGContextRef c = UIGraphicsGetCurrentContext();
	
	// Set the drawing stroke and fill colours
    CGContextSetStrokeColorWithColor(c, [color CGColor]);
	
	// If the requested size is not square then we need to calculate the largest square in that image and draw into that.
	float iconSize; // Don't need height at width: they are the same!
	if (size.width>=size.height)
	{
		iconSize = size.height;
	}
	else
	{
		iconSize = size.width;
	}
	
	// Add the circle of the magnifying glass
	float circleStrokeWidth = iconSize/14.f;
	float halfCircleStroke = circleStrokeWidth/2.0;
	float circleDiameter = iconSize - iconSize/3.605;
	CGContextSetLineWidth(c,circleStrokeWidth);
	CGContextAddEllipseInRect(c,CGRectMake(halfCircleStroke, halfCircleStroke, circleDiameter, circleDiameter));
	CGContextStrokePath(c);	
	
	// Now add the handle
	// First we need to calculate an intersection point
	// See http://mathworld.wolfram.com/Circle-LineIntersection.html
	// We will be assuming that our circle was centered on (0,0).  We can correct this later
	// Line defining points are (x1,y1)=(-circleDiameter/2,circleDiameter/2) and (x2,y2)=(circleDiameter/2,-circleDiameter/2)
	// Note I have eliminated terms that are not needed and pre-calculated some values.
	float diametersq = circleDiameter*circleDiameter;
	float dr = sqrt(diametersq + diametersq);
	float drsqr = dr*dr;
	float r = circleDiameter/2.0;
	
	// Note lots of terms removed from below!
	float ourX = circleDiameter*sqrt(r*r*drsqr)/drsqr + r + halfCircleStroke; // Non't calculate ourY: as our line is at 45 degrees we don't need both!
	
	CGContextSetLineWidth(c,iconSize/7.f);
	CGContextMoveToPoint(c, iconSize-(iconSize/24.0), iconSize-(iconSize/24.0));
	CGContextAddLineToPoint(c,ourX,ourX);
	CGContextStrokePath(c);	
	
	// Get the image that we will return from this method
	UIImage *toReturn = UIGraphicsGetImageFromCurrentImageContext();
	
	// We are done: end the drawing context
	UIGraphicsEndImageContext();
		
	return toReturn;
}

@end

I'm probably going to do the favourites icon soon as I think I'll need it but if anyone wants to add implementations for any of the other icons then that would be cool

Edit to add: I've attached a screenshot of what the icon looks like at 24x24 in the colour I wanted.

 

[robbieduncan]

In case anyone is interested this will draw a pretty decent copy of the Favourites icon:

+ (UIImage *) favouritesIconOfSize:(CGSize) size inColor:(UIColor *) color;
{
	// Get a context to draw in
	UIGraphicsBeginImageContext(size);
	
	// We need a reference to the context we've just created to use all the CG Methods.  I don't know why the above doesn't return the context...
	CGContextRef c = UIGraphicsGetCurrentContext();
	
	// Set the drawing stroke and fill colours
    CGContextSetStrokeColorWithColor(c, [color CGColor]);
	CGContextSetFillColorWithColor(c, [color CGColor]);
	
	// Draw a 5-pointed star
	float mid = floor(size.width/2.0);
	float hInset = ceil(size.width/5.7)+0.5;
	float vInset = ceil(size.height/2.7)-0.5;
	CGContextMoveToPoint(c, mid, 0);
	CGContextAddLineToPoint(c, hInset, size.height);
	CGContextAddLineToPoint(c, size.width, vInset);
	CGContextAddLineToPoint(c, 0, vInset);
	CGContextAddLineToPoint(c, size.width-hInset, size.height);
	CGContextAddLineToPoint(c, mid, 0);

	// Close the path
	CGContextClosePath(c);
	
	// Fill & stroke the path
	CGContextDrawPath(c, kCGPathFillStroke);  
	
	// Get the image that we will return from this method
	UIImage *toReturn = UIGraphicsGetImageFromCurrentImageContext();
	
	// We are done: end the drawing context
	UIGraphicsEndImageContext();
	
	return toReturn;	
}